background-attachment: fixed在移动端被浏览器主动禁用，伪元素+position: fixed是可靠替代方案，需设top/left/right/bottom为0、z-index: -1、background-size: cover与center配对，并避免transform/filter干扰。
background-attachment: fixed 在移动端根本不会生效，所谓“抖动”其实是它压根没固定住——你看到的是 background-attachment: scroll 的默认行为在滚动，不是性能问题，是功能被浏览器主动砍掉了。
为什么伪元素方案能绕过禁用机制
移动端 Safari 和多数安卓 WebView 直接忽略 background-attachment: fixed 声明，但 position: fixed 本身完全受支持。把背景图挪到 ::before 伪元素上，再给它设 position: fixed，就彻底避开了被阉割的属性路径。
关键点在于：伪元素必须脱离文档流、铺满视口、且不被父容器裁切。否则即使写了 top: 0; left: 0; right: 0; bottom: 0，也可能因父级 overflow: hidden 或 contain: paint 导致失效。
伪元素写法必须满足的硬性条件
-
top、left、right、bottom全设为0，不能只写top: 0; left: 0 -
z-index: -1，确保在内容层下方；但父容器不能有overflow: hidden，否则伪元素会被裁掉 -
background-size: cover和background-position: center center必须配对，否则横竖屏切换时偏移 - 避免给伪元素加
transform、filter、opacity < 1，这些会创建新层叠上下文，让fixed定位基准错乱 - 伪元素结构必须在初始 HTML 中写死，JS 动态插入的
::before在部分 iOS 版本里不触发重绘
iOS 17+ Safari 的抖动和漂移怎么压
iOS 17+ 和 macOS 14+ Safari 对 position: fixed 伪元素的合成更激进，刚滚动或缩放后容易“抖一下”或位置漂移。这不是 bug，是合成策略变严格了。
立即学习“前端免费学习笔记（深入）”；
稳定做法是组合两个声明：
body::before {
backface-visibility: hidden;
transform: translateZ(0);
}
这比单用 translateZ(0) 更可靠，能强制走稳定的 GPU 合成路径。但注意：transform: translateZ(0) 只对 position: fixed 或 absolute 元素起作用，relative 无效；也不要给 body 整体加，否则可能引发内存暴涨或遮挡。
伪元素方案失效的常见盲区
很多项目写了伪元素却还是滚动，问题往往不在 CSS 本身，而在容器结构：
- 父容器用了
content-visibility: auto或contain: paint，fixed会直接失效，得把伪元素提到<body>直接子级 - 伪元素被包裹在带
border-radius+overflow: hidden的容器里，背景图会被意外裁切；改用clip-path: inset(0) - 误用
%单位做transform（如translateY(-50%)），iOS Safari 对小数百分比计算不稳定，必须用整数像素值 - 监听
scroll做视差时没用requestAnimationFrame节流，快速滚动直接卡顿
真机测试永远比 DevTools 模拟器重要，尤其要覆盖 iOS 15–17 的 Safari、微信内置浏览器、QQ 浏览器这些实际用户高频环境——它们的内核版本往往滞后，合成策略也更保守。
