移动端 background-attachment: fixed 失效是因 iOS Safari 完全禁用、Android WebView 为性能主动屏蔽；可用 position: sticky + JS 反向位移或 background-attachment: local 替代。
background-attachment: fixed 为什么在移动端失效
因为大多数移动浏览器（包括 iOS Safari 和 Android Chrome）默认忽略 background-attachment: fixed，这是出于性能和触摸滚动行为的权衡。它不是 bug，是规范级限制。
- 仅桌面端 Chrome/Firefox/Edge 稳定支持
background-attachment: fixed - iOS Safari 完全禁用该值（即使写了也退化为
scroll） - Android WebView 行为不一致，部分版本强制重绘导致卡顿，所以厂商主动屏蔽
用 position: sticky 模拟“背景不动”效果
核心思路：把背景图从 body 或容器背景中抽离，单独做成一个固定尺寸的 <div>，用 <code>position: sticky + top: 0 锁住视觉位置，再通过 transform: translateY() 反向抵消滚动位移 —— 实际是“动图不动人”，而非“人动图不动”。
- 必须给父容器设
overflow-y: scroll或使用body { height: 100vh; overflow-y: scroll; } -
sticky元素需有明确高度（比如height: 100vh），否则无法触发粘性定位 - 反向位移量 = -scrollTop，需用 JS 监听
scroll事件实时更新transform
const bgEl = document.querySelector('.bg-layer');
document.addEventListener('scroll', () => {
bgEl.style.transform = `translateY(${-window.scrollY}px)`;
});
纯 CSS 替代方案：background-attachment: local
background-attachment: local 是唯一被广泛支持的“相对内容滚动”的背景行为 —— 背景图随容器内滚动条一起动，但不会脱离内容块。它不是“不动”，而是“贴着内容动”，在某些场景下反而更自然（比如长图文页中的纹理背景）。
- 兼容性好：Chrome 55+、Firefox 59+、Safari 15.4+、Edge 79+
- 只对设置了
overflow: auto/scroll的容器生效，对body无效 - 注意：若容器无显式高度或未触发滚动条，
local和scroll表现完全一致
真正要“背景绝对静止”，得接受 JS 控制的代价
如果设计强依赖背景图完全不随滚动偏移（比如视差封面、品牌主视觉），那就绕不开 JS。别试图用 fixed 在移动端硬扛，它要么不工作，要么触发重排卡死。
立即学习“前端免费学习笔记（深入）”；
- 监听
scroll时用requestAnimationFrame节流，避免掉帧 - 用
will-change: transform提前提示浏览器该元素将动画，启用 GPU 加速 - 注意 iOS 上
scroll事件触发时机滞后，建议改用touchmove+getBoundingClientRect()做平滑补偿
最麻烦的不是写几行代码，而是得同时处理 Safari 的弹性滚动回弹、安卓 WebView 的缩放干扰、以及页面 zoom 改变时 background-size 计算错位 —— 这些细节没文档，只能真机反复试。
