background-attachment: fixed 在桌面端失效主因是父容器触发浏览器降级条件，如 transform、filter 等属性强制将其转为 scroll；移动端则被 ios safari 等静默禁用，需 js 或 scroll-driven animations 替代。
background-attachment: fixed 在桌面端为何不生效
写了 background-attachment: fixed 却没视差，大概率不是代码漏了，而是触发了浏览器的硬性降级条件。Chrome v56+ 和 Safari 早年就规定：只要父容器用了 transform、filter、will-change 或 opacity（哪怕 opacity: 0.99），就会强制关闭 fixed 行为，计算值直接变成 scroll。DevTools 的 Computed 面板里看到的就是这个结果。
常见踩坑点包括：
- 给
.parallax-section加了transform: translateZ(0)想“强制硬件加速”，反而让 fixed 失效 - 背景图写在嵌套的
.wrapper > .hero里，而非直接设在body或独立全屏块上 - 高度用的是
min-height: 100vh，但background-attachment: fixed要求显式height: 100vh才能锚定视口坐标系 - 祖先元素用了
position: sticky或overflow: hidden，干扰了合成层判定
移动端必须 fallback 到 background-position + scroll
iOS Safari 和主流安卓 WebView 对 background-attachment: fixed 是静默禁用——不是 bug，是主动降级，因为滚动时重绘压力太大。此时唯一跨平台可靠的方案，是用 JS 动态控制 background-position。
实操要点：
- 目标元素必须显式声明
background-attachment: scroll，避免继承或 reset 干扰 - 监听
window.scrollY，用requestAnimationFrame节流，别直接绑scroll事件 - 位移比例建议取
0.2～0.6，例如：element.style.backgroundPosition = 'center ' + (window.scrollY * 0.4) + 'px' - 背景图尺寸至少是容器宽高的 1.5 倍；优先用
background-size: cover，避免用百分比写法（如50% 50%）导致重排跳变
Chrome 115+/Safari 17.4+ 推荐用 scroll-driven animations
这是目前唯一真正“平滑”的原生方案：位移与滚动距离严格线性映射，快滚慢滚体验一致，且不依赖 JS。但它有明确约束，不满足就白写。
关键条件：
- 动画只能用
background-position，混用transform或其他属性会失效 - 必须配合
@scroll-timeline规则定义时间轴，只写animation-timeline: scroll(root)不生效 - 滚动容器需有明确上下文，比如
body或设置了overflow-y: scroll的父元素 - 加
contain: layout style paint到滚动容器，否则可能卡顿或跳帧 - 用
CSS.supports('animation-timeline', 'scroll()')检测支持性，不支持时 fallback 到 JS 方案
容易被忽略的 layer 截断问题
当父容器存在 transform、perspective、filter 或 overflow: hidden 时，background-position 的计算参考系会被截断——它不再基于整个视口，而是基于该父容器的局部坐标系。结果就是偏移量失准，视差感变弱甚至反向。
这种情况下，background-position 就不可靠了，得换思路：要么把背景图提到更高层级（比如直接设在 body），要么改用 transform: translateY() 配合 position: sticky 模拟（注意不能和 transform 同元素共存）。真正的难点不在写法，而在判断哪一层开始“截断”了参考系——这往往要靠 DevTools 的 Layers 面板逐层排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
