background-attachment: fixed 在移动端失效是因 iOS 和 Android WebView 为性能与滚动一致性主动禁用该属性；替代方案包括 position: sticky 伪元素模拟、scroll-driven animation（现代浏览器）或节流的 JS 方案。
background-attachment: fixed 为什么在移动端失效
它在桌面端能实现“背景不动、内容滚动”的视差感，但绝大多数 iOS 和 Android WebView（包括 Chrome for Android）会直接忽略 background-attachment: fixed，或强制降级为 scroll。这是浏览器出于性能和手势滚动一致性的主动限制，不是你 CSS 写错了。
常见现象：background-attachment: fixed 在 Safari 或微信内置浏览器里完全没反应，DevTools 里样式还亮着，但视觉毫无固定效果。
- iOS Safari 全面禁用该属性（从 iOS 7 起），连
transform: translateZ(0)也救不回来 - Android Chrome 80+ 默认禁用，仅对根元素（
<body>或<html>）且无overflow: hidden等干扰时可能偶现生效 - 即使生效，也常伴随滚动卡顿、背景图错位或缩放失真
替代方案：用 position: sticky 模拟固定背景
比 JS 方案更轻量、兼容性更好，适合单页中局部视差区域（比如 banner 区块）。核心是让背景图容器脱离文档流但随视口“粘住”。
关键点：position: sticky 必须配合 top（或 bottom）才生效，且父容器不能有 overflow: hidden 或 transform。
立即学习“前端免费学习笔记（深入）”；
.parallax-section {
height: 100vh;
position: relative;
}
.parallax-section::before {
content: "";
position: sticky;
top: 0;
width: 100%;
height: 100%;
background-image: url('bg.jpg');
background-size: cover;
background-position: center;
z-index: -1;
}
- 必须用
::before或::after伪元素承载背景，否则sticky在普通元素上对背景无效 - 父容器
.parallax-section高度要明确（如100vh），否则sticky无锚点 - 慎用
transform、will-change等触发层叠上下文的属性，它们会让sticky失效
真正可靠的跨端方案：纯 CSS 的 transform + scroll-driven animation（现代浏览器）
Chrome 115+、Safari 17.4+、Firefox 119+ 支持 @scroll-timeline，可驱动背景位移，实现精准视差。虽然兼容性有限，但它是唯一不依赖 JS、不 hack、语义清晰的原生方案。
原理：监听滚动进度，用 animation 控制背景的 background-position-y，速度比内容慢，形成视差。
@scroll-timeline parallax-timeline {
source: selector(#scroller);
orientation: vertical;
start: 0px;
end: 100vh;
}
.parallax-bg {
animation: parallax 1s linear;
animation-timeline: parallax-timeline;
}
@keyframes parallax {
0% { background-position-y: 0; }
100% { background-position-y: -50px; }
}
- 需要给滚动容器加
id="scroller"并设overflow-y: scroll - 视差强度由
@keyframes中 y 偏移量控制（如-50px），数值越大越明显 - 旧浏览器会直接忽略
animation-timeline，回退到静态背景，无报错无副作用
别碰 JS 方案除非你真需要精细控制
用 requestAnimationFrame + getBoundingClientRect() 手动更新 background-position 确实能全平台生效，但代价高：
- 滚动事件频繁触发，容易掉帧，尤其低端安卓机
- 需手动处理
touchmove、scroll、resize多种事件源 - 必须加节流（
throttle）和取消监听逻辑，否则内存泄漏 - 若页面有
transform: scale()或 iframe，坐标计算极易出错
真要用，优先选 IntersectionObserver + element.style.backgroundPosition 动态更新，比监听全局 scroll 更轻。
视差背景最易被忽略的其实是图片尺寸和 DPR 适配——background-size: cover 在 2x 屏下若只提供 1x 图，边缘模糊会比“不固定”更伤体验。
