background-attachment: fixed 在移动端基本无效，因安卓 webview 和 ios safari 为性能主动禁用；可靠替代方案是用 position: sticky + transform 模拟，或谨慎使用 scroll-driven animations。
background-attachment: fixed 在移动端根本不起作用
绝大多数安卓 WebView 和 iOS Safari（尤其 iOS 15+）会忽略 background-attachment: fixed，不是你写错了，是浏览器主动禁用——为省电、防卡顿、避免合成层爆炸。它只在桌面 Chrome/Firefox 的部分场景下“看起来”生效，但实际渲染路径早已被降级。
常见错误现象：background-attachment: fixed 写对了，背景图随滚动“粘”在视口不动，但在 iPhone 上一滑就跟着动，像没设一样；DevTools 里属性还亮着，但毫无视觉差效果。
- 别依赖
background-attachment: fixed做核心动效，它不是可靠 API - iOS Safari 会把含
fixed的背景层强制转为普通图层，失去视差能力 - 某些 Android 厂商定制 WebView（如微信内置浏览器）连解析都跳过，直接当无效声明处理
用 position: sticky + transform 模拟固定背景层
真正可控的做法：把背景图抽成独立元素，用 position: sticky 锁定其父容器位置，再靠 transform: translateY() 反向抵消滚动位移，制造“背景不动、内容上浮”的错觉。
使用场景：单页长图文页头、产品介绍节的视差标题区、营销落地页首屏大图。
立即学习“前端免费学习笔记（深入）”；
- 外层容器设
height: 100vh且overflow-y: scroll - 背景图元素设
position: sticky; top: 0;，同时加will-change: transform提前触发 GPU 合成 - 监听
scroll事件，用requestAnimationFrame更新transform: translateY(-${scrollY * 0.5}px)（0.5 是视差系数） - 必须给背景图加
pointer-events: none，否则会拦截点击穿透
section.hero {
height: 100vh;
overflow-y: scroll;
}
.hero__bg {
position: sticky;
top: 0;
will-change: transform;
pointer-events: none;
}纯 CSS 方案：clip-path + background-position 动态偏移
如果不想写 JS，可用 background-position 配合 clip-path 截取局部区域，再用 @property + scroll() 函数驱动（仅 Chromium 115+ 支持）。但兼容性极窄，仅适合实验性项目或内嵌 WebView 场景。
性能影响：该方案不触发重排，但 scroll() 函数目前仍属高成本计算，频繁滚动时 FPS 明显下降；iOS 完全不识别 scroll()，会回退到静态背景。
- 必须声明
@property --bg-y { syntax: '<length>'; inherits: false; initial-value: 0px; }</length> background-position: center calc(50% + var(--bg-y))-
clip-path: inset(0 0 0 0 round 8px)防边缘拉伸失真 - 别在
body或html上直接用，需包裹在有明确scroll-margin-top的容器内
为什么 scroll-driven animations 不是万能解
@keyframes 配 animation-timeline: scroll() 看似优雅，但它控制的是整个元素的动画状态，不是背景位移本身。你想让背景“慢半拍”，它只能靠缩放/透明度/位移帧来模拟，无法复现原生 background-attachment: fixed 的图层分离感。
容易踩的坑：scroll() 默认绑定到最近的可滚动祖先，若中间有 overflow: hidden 或 contain: layout，timeline 直接失效；错误信息是 Invalid animation timeline，但 DevTools 不报红，只静默降级。
- 必须确保滚动容器有明确高度和
overscroll-behavior: contain -
animation-range要写成entry 0% entry 100%，不能只写百分比 - Chrome Canary 才支持
scroll() with orientation，横向滚动视差目前无标准方案
复杂点在于：视觉差本质是图层合成时序问题，不是样式计算问题。所有纯 CSS 方案都在绕开浏览器渲染管线的真实限制，而 JS 方案又得扛住滚动抖动和输入延迟。真要稳定，就得接受用 IntersectionObserver 分段触发 + canvas 绘制背景的重成本方案——但那已经不是“CSS 背景关联”了。
