background-attachment: fixed 在移动端基本无效，ios safari 和多数安卓 webview 会直接忽略该声明降级为 scroll；pc 端可用但需用 @media (hover: hover) and (pointer: fine) 兜底；推荐用 background-position + scroll 模拟实现兼容性更好的视差效果。
background-attachment: fixed 在移动端基本无效，别把它当跨端方案用。 它在 PC Chrome/Firefox 上能跑，但 iOS Safari 和多数安卓 WebView（包括微信内置浏览器）会直接忽略该声明，降级为 scroll —— 不是你的 CSS 写错了，是浏览器主动禁用。
为什么 background-attachment: fixed 在手机上不工作
Chrome 自 v56、Safari 更早起就默认禁用 background-attachment: fixed 的滚动固定行为。原因很实际：
- fixed 背景需持续合成新图层，对移动设备 GPU 和内存压力大
- 当父容器有
overflow: hidden、transform或will-change时，失效概率进一步升高 - 即使写了
fixed，DevTools → Elements → Computed 中看到的background-attachment值往往是scroll，这就是真实生效值
如何检测它是否真正在运行
别信代码里写的声明值，看浏览器最终计算出的结果：
- 打开 DevTools → 切到 Elements 面板 → 选中目标元素
- 在右侧 Styles 标签页下拉到底，展开
background-attachment行 - 点开「Computed」子项，确认显示的是
fixed还是scroll - 如果写的是
fixed但 computed 是scroll，说明已被浏览器降级，此时视差已失效
PC 端可用但需加媒体查询兜底
如果只面向桌面用户，可以用 @media 锁定高精度输入设备，避免误触移动端逻辑：
/* 仅在支持 hover 且指针精细的设备上启用 fixed */<br>@media (hover: hover) and (pointer: fine) {<br> .parallax-section {<br> background-attachment: fixed;<br> }<br>}
这个条件基本排除了所有主流触摸设备（iOS/Android/平板），但保留了桌面 Chrome、Edge、macOS Safari。
替代方案：用 background-position + scroll 模拟
兼容性最好、可控性最强的落地方式，核心就是用 JS 动态改背景位移：
- 给元素显式设
background-attachment: scroll，避免继承干扰 - 监听
window.scrollY，用requestAnimationFrame节流更新background-position - 位移比例建议控制在
0.2～0.6：例如backgroundPosition = 'center ' + (window.scrollY * 0.4) + 'px' - 必须配
background-size: cover或明确宽高，否则位移时边缘易露白
真正麻烦的不是怎么写，而是得同时处理 PC 的 fixed 降级、移动端的 scroll 模拟、以及 scroll-driven animations 的渐进增强——三者边界模糊，稍不留神就出现“PC 正常、iOS 白屏、安卓卡顿”的混合失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
