CSS背景关联设置_background-attachment滚动视觉差

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 背景关联”了。