background-attachment: fixed 在移动端基本失效，ios safari 完全无视，android chrome 常静默降级为 scroll；推荐用 perspective + translatez 纯 css 3d 方案，不依赖 js、不触发重排、兼容性好，需配合 transform-style: preserve-3d、scale() 补偿缩放及 overflow-y: auto 等关键兜底样式。
background-attachment: fixed 在移动端 H5 活动页里基本没用——iOS Safari 无视它，Android Chrome 也常静默降级为 scroll。真要实现带纵深感的视差滚动，得绕开这个坑，直接用 CSS3 的 3D 变换机制。
为什么 perspective + translateZ 是移动端首选方案
它不依赖滚动事件监听，不触发重排，纯 CSS 渲染，对低端安卓机和 iOS 设备都友好。核心是利用浏览器的 3D 渲染管线，让不同 translateZ 值的层在滚动时自然产生视差速度差，而不是靠 JS 算偏移量。
-
perspective: 1px越小，Z 轴深度感越强；但别设成0.1px，部分 Android WebView 会渲染异常 - 各层必须加
transform-style: preserve-3d，否则子元素被拍平，Z 轴失效 -
translateZ(-1px)和translateZ(-2px)的差值不用太大，±0.5px～2px 足够出效果，差太多反而失真 - 记得补
scale()：Z 轴后缩放会导致图层变小，比如translateZ(-1px)后加scale(2)拉回原尺寸
必须加的兼容性兜底样式
很多 H5 活动页一上线就发现视差不动，不是代码写错，而是漏了关键渲染上下文控制。以下四条缺一不可：
- 外层容器设
overflow-y: auto（不能是scroll，iOS Safari 对scroll容器内 3D 变换支持差） - 所有视差层用
position: absolute或position: fixed，避免文档流干扰 Z 轴堆叠 - 禁用可能触发层叠上下文的属性：删掉父级的
opacity: 0.99、filter、will-change，哪怕只为了“看起来更酷” - 确保背景图层有显式
background-image，哪怕用url("data:image/svg+xml,")占位——纯色背景不触发视差渲染
滚动卡顿？大概率是 transform 触发了软件渲染
某些安卓低端机上，perspective + translateZ 组合会被强制 fallback 到 CPU 渲染，帧率骤降。这时要手动开启硬件加速：
- 给外层容器加
transform: translateZ(0)或will-change: transform - 但别滥用
will-change：只加在真正参与视差的层上，且滚动结束 300ms 后用 JS 移除，否则内存泄漏 - 测试时打开 Chrome DevTools → Rendering → 勾选 “Paint flashing”，看是否大面积绿色闪烁；有，说明重绘太频繁，得简化图层或压缩图片尺寸
- 如果仍卡，把背景图换成 base64 编码的 SVG 或极简 PNG，避开 JPG 解码瓶颈
最易被忽略的一点：移动端视口高度经常因地址栏收起/弹出而变化，导致 height: 100vh 失效。别用 vh 控制视差容器高度，改用 JS 动态写 style.height = window.innerHeight + "px"，并在 resize 事件里更新——这个细节在 iPhone 上影响远大于 Android。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
