background-attachment: fixed 在移动端根本无效，是 ios safari 和主流安卓 webview 为保障滚动性能主动禁用的硬性策略；应改用 body::before 伪元素 + position: fixed 方案，并严格满足 margin: 0、四边为 0、z-index: -1、pointer-events: none 等条件。
background-attachment: fixed 在移动端根本不会生效——这不是你漏写了前缀、没加 transform，也不是 Safari 的某个旧 bug，而是 iOS Safari 和所有主流安卓 WebView（Chrome 84+、微信、QQ、Samsung Internet）主动禁用该行为的硬性策略。
为什么浏览器直接砍掉 background-attachment: fixed
它需要每帧都重绘整个视口尺寸的背景图层，对移动端 GPU 和内存是持续高压。桌面端能扛住，是因为显卡和散热余量大；手机必须降级，否则滚动卡顿、发热、续航暴跌。这不是“兼容性问题”，是跨厂商一致的性能取舍。
常见现象包括：
-
background-attachment在 DevTools 的 Computed 面板里显示为scroll，哪怕你写的是fixed - 桌面 Chrome 正常，真机一滑背景立刻跟着动
- 横竖屏切换后背景错位、拉伸，甚至闪白一帧
- 加了
-webkit-background-attachment: fixed或transform: translateZ(0)完全无效，还可能触发意外层叠上下文
哪些 CSS 属性会让 fixed 静默退化
只要 body 或其任意祖先元素设置了以下任一属性，background-attachment: fixed 就会被强制当作 scroll 处理：
-
transform（哪怕只是transform: translateZ(0)） -
filter（包括filter: none） -
will-change（含will-change: transform） -
perspective或backface-visibility -
overflow: hidden+position: relative的组合
尤其要注意：很多项目为“硬件加速”在 body 上加了 transform: translateZ(0)，这会直接废掉所有固定背景逻辑。
为什么 position: sticky 不能当平替
position: sticky 不是 background-attachment: fixed 的替代方案，而是一种受限的锚定行为：
- 它的参考系是最近的“分隔容器”，不是视口——如果父容器用了
transform或filter，sticky 就会锚定到那个容器内部，而非屏幕 - 必须显式设
height: 100vh，min-height不行；否则无法确定锚点位置 - iOS 15+ 支持稍好，但安卓 WebView 仍极不稳定，滚动时容易“跳一下”或“卡半截”
-
z-index对 background-attachment 本身无作用，别指望靠它把背景压到内容下方
真正跨端稳定的替代方案：::before + position: fixed
这是目前唯一无需 JS、覆盖 iOS 15+ 和安卓主流 WebView、且性能可控的方案，但必须满足全部条件：
-
body { margin: 0; }——否则伪元素会因默认外边距错位一像素 -
body::before必须有content: ""，否则不渲染 - 必须写
top: 0; right: 0; bottom: 0; left: 0;，只写width: 100%; height: 100vh在 iOS 横屏时容易漏边 -
z-index: -1是硬性要求，否则遮挡所有点击和滚动 - 必须加
pointer-events: none，避免拦截下方内容交互 - 父容器不能有
overflow: hidden、contain: paint或content-visibility: auto，否则伪元素会被裁切
真正要注意的复杂点不在写法本身，而在 Safari 对合成层越来越激进的处理：iOS 17+ 滚动初帧常“抖一下”，软键盘弹出后伪元素位置可能漂移，某些版本对 JS 动态插入的 ::before 甚至不触发重绘——这些都不是 CSS 写错了，而是你得主动适配 Safari 的 GPU 合成节奏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
