background-attachment: fixed 在移动端基本失效，因chrome v56+和safari主动降级为scroll；需满足无transform父容器、height: 100vh等硬性条件才能在桌面端稳定工作；移动端应fallback至scroll+js动态background-position或使用scroll-driven animations。
background-attachment: fixed 能做出全屏纵向视差，但只在部分桌面浏览器可靠，移动端基本失效——这不是你代码写错了，是 Chrome v56+ 和 Safari 早年就主动降级为 scroll。
为什么 background-attachment: fixed 在全屏场景下经常“不动”
这个属性依赖浏览器将背景图绑定到视口（viewport）坐标系，但现代渲染引擎对它做了多重限制：
- 父容器只要用了
transform、filter、will-change或opacity（哪怕只是opacity: 0.99），就会触发新层叠上下文，fixed立即退化为scroll - 在 iOS Safari 和多数安卓 WebView 中，该行为被默认禁用，DevTools 里看到的
background-attachment计算值就是scroll - 即使写在
body上，Chrome v99+ 也要求它必须是“根滚动容器”，子容器如.parallax-section即使样式全对，也可能不生效 -
position: sticky或overflow: hidden的祖先元素也会干扰合成层判定，导致固定失败
怎么让 fixed 视差在桌面端真正跑起来
想让它在 PC 上稳定工作，必须满足一组硬性条件，缺一不可：
- 背景图直接设在
body或一个独立全屏块上（如.parallax-section），且该元素不能嵌套在任何带transform的父容器中 - 显式声明
height: 100vh（不是min-height），否则滚动锚点丢失 - 配套必须写全：
background-size: cover、background-position: center、background-repeat: no-repeat - 避免任何可能触发新层叠上下文的操作——比如不要给同个元素加
transform: translateZ(0)做“强制硬件加速” - 可加媒体查询兜底：
@media (hover: hover) and (pointer: fine) { .parallax-section { background-attachment: fixed; } }，只对鼠标设备启用
移动端 fallback：用 scroll + background-position 模拟
当 background-attachment: fixed 不可用时，最可控的替代方案是监听 window.scrollY 动态改 background-position：
- 目标元素设
background-attachment: scroll（显式覆盖继承值） - JS 中用
requestAnimationFrame节流，避免卡顿；位移比例建议控制在0.2～0.6之间，例如：element.style.backgroundPosition = 'center ' + (window.scrollY * 0.4) + 'px' - 背景图必须设
background-size: cover或明确宽高，否则滚动时边缘容易露白 - 注意：若页面有
scroll-behavior: smooth，需监听scrollend事件补一帧，否则快速滚动后位置会滞后
真正跨端可靠的现代方案：scroll-driven animations
Chrome 115+、Safari 17.4+、Firefox 119+ 支持原生滚动驱动动画，无需 JS，性能更好：
- 基础结构：用
@keyframes定义background-position变化，再通过animation-timeline: scroll()绑定滚动进度 - 关键限制：只能驱动
background-position，不能用transform；容器必须有明确滚动上下文（不能是overflow: visible） - 检测支持性：
CSS.supports('animation-timeline', 'scroll()')，不支持时回退到 JS 方案 - 注意：
scroll-timeline-axis: y必须显式声明或省略（默认 y），且时间线范围需匹配容器高度，否则动画不触发
实际兼容性边界比文档写的更窄——scroll-timeline 在 Safari 17.4 中仍对 body 滚动支持不稳定，最好把视差区块包在带 overflow-y: scroll 的独立容器里。别指望一个 CSS 属性通吃所有设备，分层降级才是常态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
