移动端 Safari 和多数 Android 浏览器默认禁用 background-attachment: fixed，iOS 15+ 起即使加 transform: translateZ(0) 也无法触发视差，仅桌面端稳定可用。
background-attachment: fixed 在现代浏览器中为何失效
移动端 Safari 和大多数 Android 浏览器默认禁用 background-attachment: fixed，不是你写错了，是浏览器主动忽略它。iOS 15+ 起连 transform: translateZ(0) 强制硬件加速都救不回来——它压根不触发视差逻辑。
常见错误现象：background-attachment: fixed 在桌面 Chrome 正常，手机一滑就变成普通滚动背景；DevTools 里样式明明生效，但视觉毫无视差感。
- 只在桌面端（Chrome/Firefox/Edge）稳定可用，移动端必须换方案
- 即使加了
will-change: transform或transform: translateZ(0)，Safari 仍会静默降级 - 如果父容器有
overflow: hidden或transform，fixed 背景会被裁剪或完全消失
用 position: sticky 模拟视差的最小可行方案
不用 JS、不依赖 background-attachment，靠层叠和滚动偏移就能做出轻量视差。核心是让背景图层比内容层“滚得慢”——用 position: sticky 锁定背景位置，再配合负 top 值制造错觉。
使用场景：单页长图介绍、产品展示页首屏，不需要精确控制滚动速率，只要视觉上有“背景滞后”感即可。
.parallax-bg {
position: sticky;
top: -50vh; /* 关键：让背景提前进入视口，滚动时相对位移变小 */
height: 200vh; /* 确保足够高，不被快速滚出 */
background-image: url('bg.jpg');
background-size: cover;
background-position: center;
}
-
top: -50vh值越小（如-80vh），视差感越强，但可能在快速滚动时露白底 - 必须给元素显式
height，否则sticky不生效 - 不能和
transform同时作用于同一元素，否则sticky失效
纯 CSS 视差真正可靠的边界：scroll-driven animations
CSS @keyframes + scroll-timeline 是目前唯一能跨平台（Chrome 115+、Safari 17.4+）实现可控视差的原生方案，但它有硬性前提：必须用 scroll-timeline 绑定滚动进度，且目标元素需是块级、有明确滚动容器。
性能影响：比 background-attachment: fixed 更耗 CPU，尤其在低配安卓机上可能出现掉帧；但比 JS 方案更省资源。
@keyframes parallax-shift {
from { background-position-y: 0; }
to { background-position-y: -100px; }
}
<p>.parallax-element {
animation: parallax-shift 1s linear;
animation-timeline: scroll(root);
background-image: url('bg.jpg');
background-size: cover;
}</p>
- 目前
scroll-timeline不支持background-attachment的联动，只能驱动background-position类属性 - Safari 要求开启实验性功能（
Scroll-driven Animations），部分用户默认关闭 - 无法在 IE 或旧版 Edge 中回退，必须提供静态 fallback 背景
为什么别急着上 IntersectionObserver + requestAnimationFrame
JS 实现视差看似灵活，但实际项目里容易踩三个坑：滚动抖动、内存泄漏、与第三方库冲突。比如用 IntersectionObserver 监听元素进入视口，再用 requestAnimationFrame 更新 backgroundPosition，结果发现 React 页面切换时 observer 没销毁，背景图持续错位。
容易被忽略的点：视差系数（parallax ratio）设为 0.3 看似合理，但当用户用触控板滚动时，deltaY 突增会导致背景“跳帧”，必须加节流或插值平滑。
- 每次监听前检查
document.scrollingElement，否则 iOS 上可能取到body导致计算偏移错乱 - 避免直接改
element.style.backgroundPosition，优先用transform: translateY()包裹背景图层，性能更好 - 如果页面用了
scroll-behavior: smooth，JS 视差必须监听scrollend事件补帧，否则结束瞬间卡顿
CSS 视差滚动真正的复杂点不在怎么写，而在判断“谁需要它”和“谁撑得住它”。移动端放弃 background-attachment: fixed 不是妥协，是看清渲染管线限制后的必然选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
