background-attachment: fixed在移动端根本无效，是ios safari和主流安卓webview主动禁用的性能策略；应改用::before伪元素+position: fixed方案，并设四边为0、z-index: -1、pointer-events: none，避免overflow: hidden等干扰。
它在移动端根本不会生效——不是你写错了，是 iOS Safari 和主流安卓 WebView 主动禁用该行为，属于明确的性能策略，不是 bug，也无法靠加前缀或 hack 修复。
background-attachment: fixed 被浏览器静默降级
iOS Safari 从初版起就完全不支持 background-attachment: fixed；Android Chrome 84+、微信/ QQ WebView、Samsung Internet 等全部默认忽略。DevTools 里样式明明显示为 fixed，但渲染层压根没创建对应图层（Layers 面板里查不到），视觉上等同于 scroll。
- 滚动时背景图立刻跟随内容移动，毫无视差感
- 横竖屏切换后拉伸、错位或短暂闪白
- 加
-webkit-background-attachment: fixed或transform: translateZ(0)无效，还可能触发意外层叠上下文
为什么浏览器要砍掉这个功能
固定背景要求每帧重绘整个视口尺寸的背景图，对内存和 GPU 压力极大。移动端为保滚动顺滑和续航，直接移除该渲染路径——这不是兼容性问题，而是主动的、跨厂商的一致决策。
- 桌面端能跑，是因为硬件资源充裕；移动端必须降级
- 即使强行启用（如 Android 开启
chrome://flags/#enable-fixed-layout），用户无法操作，且易引发卡顿 - 在
position: sticky容器内设fixed，参考系会变成该容器，而非视口，这是规范行为，非 bug
哪些“修复尝试”注定失败
所有试图保留 background-attachment: fixed 的做法，在当前主流环境下基本无效：
- 加
-webkit-前缀：iOS Safari 不认，安卓 WebView 忽略 - 给父元素加
transform: translateZ(0)或will-change: transform：可能触发新层叠上下文，反而让定位基准错乱 - 改
body或html的overflow/transform样式：不影响 background-attachment 的禁用逻辑 - 用 JS 监听
scroll动态改background-position：不节流会卡顿，用window.scrollY在 sticky 场景下计算偏移不准
真正要注意的复杂点
替代方案本身不难写，难的是 Safari 对合成层的处理越来越激进：iOS 17+ 滚动初帧常“抖一下”，键盘弹出后伪元素位置漂移，甚至某些版本对 JS 动态插入的 ::before 不触发重绘。这些都不是 CSS 写错了，而是你得主动对齐 Safari 的 GPU 合成策略——比如必须加 backface-visibility: hidden，且 HTML 初始结构就得写死伪元素，不能靠 JS 创建。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
