background-attachment: fixed 在 body 上没反应，是因为 transform、filter、will-change 或 opacity 等属性触发了新层叠上下文，使 fixed 背景被限制在局部容器内而非视口；iOS Safari 更是彻底不支持该属性。
background-attachment: fixed 在 body 上为什么没反应
直接给 body 写 background-attachment: fixed 却发现背景照常滚动，大概率不是代码漏了，而是被父级或自身样式“劫持”了定位上下文。浏览器一旦检测到 html 或 body 有 transform、filter（哪怕只是 filter: none）、will-change、opacity fixed 就不再锚定视口，而是锚定这个局部容器。
常见触发点包括：
-
body { transform: translateZ(0) }（为硬件加速加的） -
html { filter: blur(0.5px) }或任何非none值 -
body { height: 100%; overflow: auto }—— 这会让body自身变成滚动容器，fixed就相对它了
验证方式：用开发者工具临时删掉所有非基础样式，只留 body { background: url(...) no-repeat center/cover; background-attachment: fixed; }，看是否恢复。
移动端 iOS Safari 和 Android Chrome 根本不认 fixed
这不是 bug，是浏览器主动禁用：background-attachment: fixed 在 iOS Safari（全版本）和 Android Chrome（v56+）中默认静默降级为 scroll。你写上它，控制台无报错，但视觉上毫无区别——因为重绘固定背景会严重拖慢滚动帧率，系统级屏蔽。
别指望 @supports (background-attachment: fixed) 能帮你判断，它在移动端永远返回 true，但行为无效。真正能落地的兼容策略只有：
- 桌面端保留
background-attachment: fixed，加-webkit-background-attachment: fixed（Safari 旧版需要） - 移动端统一回退到
position: fixed+ 独立<div>层 - 避免在
body上做任何需要视差/固定背景的交互逻辑，比如监听 scroll 计算偏移
用 position: fixed 模拟固定背景的硬性要求
手动建一个 <div class="bg-layer"></div> 放在 <body> 最顶部，比写 CSS 更可控，但必须满足三个条件，缺一不可：
-
position: fixed+top: 0; left: 0; width: 100vw; height: 100vh—— 注意用vw/vh，不用%，否则在 iOS Safari 横屏时可能铺不满 -
z-index: -1—— 不是0或1，否则会遮住所有内容；若页面有透明 header，需确保其background-color有 alpha 值，让背景透出 -
background-size: cover; background-position: center;—— 必须显式声明，否则默认拉伸变形；不要加padding或margin，这层只负责铺图
如果页面用了 body { overflow-x: hidden }，记得也加到 .bg-layer 上，不然横屏时右侧可能溢出白边。
滚动时背景轻微抖动或错位怎么办
即使用了 position: fixed 层，在高 DPR 屏幕或 Chrome 某些版本里仍可能出现 1px 抖动，根源是 subpixel 渲染精度问题，尤其当页面存在缩放、backface-visibility: hidden 或 font-smoothing 开关时。
缓解手段很具体：
- 给
.bg-layer加backface-visibility: hidden; transform: translateZ(0)—— 仅用于触发 GPU 渲染，不改变位置 - 确保
html和body没有overflow-x: hidden以外的overflow值，overflow: hidden本身也要慎用，它可能干扰 fixed 定位精度 - 绝对不要给
.bg-layer加box-shadow、border或outline，这些会触发额外重绘，放大抖动
最易被忽略的是：这个背景层必须是 body 的直接子元素，不能套在某个 div#app 或 main 里——否则它的 fixed 会受外层 transform 或 contain: layout 干扰，连降级方案都会失效。
