background-attachment: fixed 在 iOS Safari 上完全失效，必须用 ::before 伪元素配合 position: fixed 实现替代；需设 content: ""、四边定位为 0、z-index: -1、pointer-events: none，并避坑 overflow: hidden、contain: paint 等。
background-attachment: fixed 在 iOS Safari 上根本不会生效——不是写法错，也不是漏加 -webkit-background-attachment: fixed，而是从初版起就被 Safari 主动禁用。它会静默降级为 scroll，DevTools 里样式明明“亮着”，但背景图照常滚动。必须换方案。
为什么伪元素 ::before + position: fixed 是唯一可靠路径
浏览器砍掉的是 background-attachment 这个渲染行为本身，但 position: fixed 是完整支持的定位机制。把背景图挪到 ::before 上，让它自己固定，就彻底绕开了被阉割的路径。
-
::before必须有content: ""，否则不渲染 - 四边定位缺一不可：
top: 0; right: 0; bottom: 0; left: 0;—— 只写width: 100%; height: 100vh在 iOS 横竖屏切换时大概率错位 -
z-index: -1是必须的，否则盖住所有内容；但父容器若设了overflow: hidden，伪元素会被裁切 - 加
pointer-events: none，否则它会拦截点击和滚动事件
iOS 17+ Safari 的合成抖动怎么压住
iOS 17+ 和 macOS 14+ 的 Safari 对 position: fixed 伪元素的 GPU 合成更激进，刚滚动或键盘弹出后容易位置跳变、“抖一下”。这不是 bug，是合成策略变化。
- 给伪元素加
backface-visibility: hidden，强制走更稳定的 GPU 合成路径 - 避免父容器同时用
border-radius和overflow: hidden—— 改用clip-path: inset(0)防裁切 - 如果父容器用了
contain: paint或content-visibility: auto，fixed会直接失效；得把::before提到直接子级 - 别用 JS 动态插入伪元素（比如
document.createElement），某些 iOS 版本不触发重绘；初始 HTML 就得写死结构
背景图尺寸和定位怎么防偏移
依赖 background-size: cover 在横竖屏切换时极易拉伸或漂移，尤其在高 DPR 设备上。
- 推荐显式控制尺寸：
width: 100vw; height: 100vh;+aspect-ratio: 16/9（按图源比例设） -
background-position: center center必须配对使用，单写center在部分安卓 WebView 中不稳 - 背景图分辨率建议 ≥ 1920×1080px，缩放时才不易糊
- 别在伪元素上加
transform、filter或opacity —— 触发新层叠上下文，会导致 <code>fixed定位基准错乱
