background-attachment: fixed 在移动端被 ios safari 和主流安卓 webview 主动禁用并静默降级为 scroll，属性能策略而非 bug；应改用 transform: translatez() + perspective + js 注入 --scroll-y 的 3d 视差方案，配合 scale 补偿与 pointer-events: none 确保交互正常。
background-attachment: fixed 不行，因为移动端不支持
直接用 background-attachment: fixed 做视差，在 iOS Safari 和部分安卓 WebView 中会被静默降级为 scroll，导致效果完全消失。这不是 bug，是浏览器主动限制——固定背景会触发强制重绘和合成层切换，影响滚动帧率。所以哪怕你写了 background-attachment: fixed 并在桌面端看着完美，上线后用户一用手机就“失效”，根本不是代码写错了，而是被浏览器拦了。
- 检查方式：在 iOS 真机 Safari 的开发者工具里，选中元素 → 查看 Computed → 搜索
background-attachment，如果显示为scroll就说明已被覆盖 - 替代方案必须绕过 background-attachment，改用
transform: translateZ()+perspective构建 3D 空间 - 不能只靠 CSS 自己算滚动位置——
:root里定义的--scroll-y变量无法自动绑定到window.scrollY，必须由 JS 注入
如何用 CSS 变量 + transform 实现可调速的多层视差
核心是把滚动距离映射成 Z 轴位移，再靠透视投影自然产生速度差。CSS 变量只负责存系数，真正驱动位移的是 transform: translateZ() 和父容器的 perspective。
- 给滚动容器设
perspective: 1px（值越小，视差越强；但小于 0.5px 容易失真） - 每个图层加
transform-style: preserve-3d，否则子元素的 3D 变换会被扁平化 - 用 JS 把
window.scrollY写进:root的--scroll-y，再在各层用calc()计算位移：transform: translateZ(calc(var(--depth, 0) * 1px)) translateY(calc(var(--scroll-y) * var(--speed, 0.1))) -
--depth控制图层远近（负值表示后退），--speed控制响应灵敏度，两者分离才能独立调试
为什么 translateZ 后还要加 scale 补偿？
当元素沿 Z 轴后退（translateZ(-2px)），它在透视下会自然缩小，导致背景图变小、露出空白。如果不补偿，滚动时会出现“背景撕裂”或边缘漏底色。
- 补偿公式是：
scale(calc(1 + (var(--depth) / -1px)))，其中分母的1px必须和父容器perspective值一致 - 比如
perspective: 1px，某层--depth: -3，那它实际缩放倍数是1 + (-3 / -1) = 4，所以要scale(4) - 这个计算必须用
calc()，不能写死——否则换一个perspective值，所有层都要手动改scale - 注意：
scale会影响子元素尺寸，如果图层里有文字或按钮，需额外用transform: scale(0.25)反向缩回
pointer-events: none 是防交互阻塞的关键
多个 translateZ 图层堆叠时，最前层（translateZ(0) 或正值）会挡住后面图层的点击和滚动事件，用户点不到内容，也滚不动页面内部区域。
- 所有纯装饰性背景层必须加
pointer-events: none - 只有承载文字、按钮、表单的前景内容层保留
pointer-events: auto - 别依赖
z-index排序——在 3D 空间里，z-index只对同层元素有效，跨 Z 轴的遮挡由渲染顺序和translateZ值决定 - 测试方法：打开 DevTools → Elements → 选中背景层 → 在 Styles 面板勾选/取消
pointer-events: none，立刻能验证是否阻塞了下方交互
复杂点在于 perspective 和 translateZ 的单位必须严格匹配，且补偿 scale 的公式不能硬编码——稍有偏差，整层就会飘、缩、错位。很多人卡在这一步，不是不会写，是没意识到 CSS 变量在这里只是“传参工具”，真正的空间关系全靠 JS 注入的数值和 CSS 的实时 calc() 运算撑住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
