background-attachment: fixed 在移动端失效是浏览器主动禁用的策略，非兼容性问题；iOS 15+ Safari 和多数 Android 浏览器均忽略该属性，即使加硬件加速也无效；替代方案为 position: sticky 模拟视差或 scroll-driven animations 精确控制。
background-attachment: fixed 在移动端根本不会生效，不是你写错了，是浏览器主动禁用它。 iOS 15+ 起 Safari 连 transform: translateZ(0) 或 will-change: transform 都无法唤醒这个属性；多数 Android 浏览器也默认忽略。你在 DevTools 里看到样式“已启用”，但滚动时背景照常跟着动——这是预期行为，不是 bug。
为什么 background-attachment: fixed 在手机上失效
这不是兼容性问题，而是平台策略：移动端滚动引擎（尤其是 WebKit）为保障滚动流畅性，直接跳过 background-attachment: fixed 的渲染逻辑。它不触发视口锚定，也不参与合成层分离，所以即使加了硬件加速标记，也不会改变结果。
- 常见错误现象：
background-attachment: fixed在桌面 Chrome 正常，iOS / Android 上完全无反应；overflow: hidden或transform父容器还会导致背景直接消失 - 必须明确：这不是“需要加前缀”或“漏写了 height”的问题，是浏览器层面的静默降级
- 如果你正用媒体查询给移动端套同一套
fixed样式，那这部分 CSS 实际上被当作文本注释处理了
移动端替代方案：用 position: sticky 模拟基础视差
不用 JS、不依赖 background-attachment，靠层叠和滚动偏移制造“背景滞后”错觉。适合首屏大图、产品展示页等对精度要求不高的场景。
-
top: -50vh是关键值：让背景提前进入视口，滚动时相对位移变小；越负（如-80vh），视差感越强，但快速滚动易露白底 - 必须设置显式
height（如height: 200vh），否则position: sticky不触发 - 不能和
transform同时作用于同一元素，否则 sticky 失效；父容器也需避免overflow: hidden - 示例结构：
.parallax-bg { position: sticky; top: -50vh; height: 200vh; background-image: url('bg.jpg'); background-size: cover; background-position: center; }
真正跨平台可控的方案：scroll-driven animations
Chrome 115+ 和 Safari 17.4+ 原生支持，是目前唯一能精确控制滚动速率、响应视口进度、且在移动端稳定的 CSS 方案。但它有硬性前提，不是简单加个动画就能跑。
- 必须绑定
scroll-timeline，且目标元素需是块级、在有明确滚动边界的容器内（不能是body直接滚动） -
@keyframes只能驱动background-position-y、transform等可动画属性，不能驱动background-attachment - 示例核心片段：
@keyframes parallax-shift { from { background-position-y: 0; } to { background-position-y: -100px; } } .parallax-element { animation: parallax-shift 1s linear; animation-timeline: scroll(root); } - 性能比 JS 方案好，但在低端安卓机上仍可能掉帧；
scroll-timeline尚未被 Firefox 支持，需降级 fallback
最常被忽略的一点：所谓“移动端满屏视差”，本质是放弃对 background-attachment: fixed 的执念。它的失效不是缺陷，而是现代滚动架构的必然取舍。真正可靠的路径只有两条——用 sticky 做轻量错觉，或用 scroll-timeline 做精确控制。其他所有“加 transform 强制启用 fixed”的尝试，2026 年依然会失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
