background-attachment: fixed 在移动端失效是因浏览器为优化性能主动禁用，非 bug；在 sticky 容器中不生效因参考系变为该容器；Safari 存在闪屏错位问题；可用伪元素 fixed 方案替代。
background-attachment: fixed 为什么在移动端失效
因为绝大多数移动浏览器（包括 iOS Safari 和 Android Chrome）为优化滚动性能，默认忽略 background-attachment: fixed，尤其在 或 上设置时完全不生效。
这不是 bug，是明确的性能取舍：固定背景会强制每帧重绘，导致滚动卡顿。所以别指望它像桌面端一样“自动工作”。
- 只在桌面端测试时有效，上线后移动端用户看不到效果
- 即使加了
-webkit-transform: translateZ(0)或will-change: transform，也无法恢复原生支持 - 若强行用 JS 模拟（如监听 scroll 事件改 background-position），需注意节流和视口判断，否则快速滚动时图片跳变或延迟明显
background-attachment: fixed 在 position: sticky 容器里不生效
当父容器用了 position: sticky，其子元素设 background-attachment: fixed 会被视为相对于该 sticky 容器定位，而非视口 —— 这是 CSS 规范定义的行为，不是浏览器兼容问题。
常见于导航栏吸顶后，下方 banner 图片本想“固定”，结果随页面一起滚动。
立即学习“前端免费学习笔记（深入）”；
- 根本原因是
fixed的参考系是最近的「分隔容器」（painting layer boundary），sticky元素会创建这样一个边界 - 解决办法只有两个：要么去掉父级
sticky，要么放弃fixed改用 JS 驱动的background-position动态计算 - 如果用 JS 方案，记得用
getBoundingClientRect()而非window.scrollY，避免因 sticky 偏移导致计算偏差
fixed 背景图在 Safari 中闪屏或错位
Safari（尤其是 macOS 14+ 和 iOS 17+）对 background-attachment: fixed 的合成策略更激进，常把背景图单独图层渲染，但缩放、transform 或 overscroll 时容易失同步。
典型表现是：页面刚滚动时背景图“抖一下”，或横屏切换后位置偏移。
- 加
backface-visibility: hidden到该元素，能强制 Safari 使用更稳定的合成路径 - 避免同时设置
background-size: cover和background-position: center center—— Safari 对这两者在 fixed 模式下的插值计算有微小误差 - 如果容器有
border-radius或overflow: hidden，背景图可能被裁切异常，建议用clip-path替代
替代方案：纯 CSS 实现“视觉固定”效果
不用 background-attachment: fixed，也能让背景图看起来不动 —— 关键是利用 transform: translateY() 反向抵消滚动距离，由父容器控制，子元素背景图保持静止。
这个方案兼容所有现代浏览器，且无闪屏、无性能警告。
- 给外层容器设
height: 100vh，内部内容用overflow-y: scroll - 背景图放在伪元素
::before上，并设position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; - 关键点：伪元素不随容器滚动，而是锚定视口，再用
background-position微调对齐即可 - 示例：
section { height: 100vh; overflow-y: scroll; } section::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url(bg.jpg) center/cover no-repeat; z-index: -1; }
真正难的不是写对那行 background-attachment: fixed，而是判断它此刻该不该出现、出现在哪一层、以及用户到底有没有看到它 —— 尤其当页面结构嵌套深、滚动上下文多的时候，一个 fixed 背景可能被七八个 stacking context 和 paint boundary 夹在中间，谁也说不清它到底附着在哪儿。
