iOS Safari 中 background-attachment: fixed 失效，须用 requestAnimationFrame 驱动 transform: translateY() 实现跨端视差；需设 passive: true、缓存 DOM、完整重写 transform、响应式降级。
纯 CSS 的 background-attachment: fixed 在 iOS Safari 上基本不工作，别指望它在真机上动起来；真正可控、跨端一致的视差效果，必须用 JavaScript 驱动 transform: translateY()，并配合 requestAnimationFrame 节流。
为什么 background-attachment: fixed 在移动端失效
这不是你代码写错了，是 WebKit（iOS Safari）主动禁用了该行为——即使加了 -webkit-background-attachment: fixed 和 transform: translateZ(0)，多数真机仍无反应。它只在桌面 Chrome/Firefox 中稳定，且要求父容器有明确高度（如 height: 100vh）、不能嵌套在 position: sticky 或 transform 父级里。
常见错误现象：background-attachment: fixed 写对了，但滚动时背景完全不动；或者只在首次加载闪一下，之后卡死。
- 必须设
min-height: 100vh（不能用height: auto） - 禁止在
overflow: hidden容器内使用 - 避免与
position: sticky元素共存，否则整个层叠上下文崩塌
用 requestAnimationFrame + transform 实现平滑视差
核心不是“怎么算”，而是“怎么不卡”。直接在 scroll 回调里改 style.transform 会触发高频重绘，低端安卓和 iOS 尤其掉帧。正确做法是把滚动值缓存下来，用 requestAnimationFrame 统一在下一帧更新所有视差层。
立即学习“前端免费学习笔记（深入）”；
- 给每个视差元素加
data-speed="0.2"（背景层）或data-speed="0.8"（前景层），系数越小越“远” - 用
window.scrollY乘以speed得位移量：element.style.transform = `translateY(${ -scrollY * speed }px)` - 务必提前设置
will-change: transform或transform: translateZ(0)，否则首帧易撕裂 - 元素需有
position: relative或position: absolute，否则transform可能不生效
移动端 scroll 事件监听必须加 passive: true
iOS 和 Android Chrome 对未声明 passive 的 scroll 监听器会强制同步执行，阻塞滚动主线程，导致严重卡顿甚至白屏。不加这个配置，视差再准也撑不过三秒滑动。
- 错误写法：
window.addEventListener('scroll', handleScroll) - 正确写法：
window.addEventListener('scroll', handleScroll, { passive: true })
多层结构排版与响应式降级要点
视差不是堆图层，而是分语义层级：用 <section> 划分区块，每层对应不同视觉距离。但要注意，transform 会创建新的层叠上下文，z-index 失效，得靠 DOM 顺序控制前后关系。
- 背景层（
data-speed="0.1"）建议用background-image+background-size: cover，而非<img>标签 - 中景装饰元素（如浮动图标）用
position: absolute+data-speed="0.4" - 前景文字/按钮保持
data-speed="1"或不加，确保可读性和点击区域稳定 - 在
@media (max-width: 768px)中移除data-speed并设transform: none，防止低端设备卡顿
最常被忽略的点是：视差层的 transform 值必须每次完整重写（比如 translateY(...)），不能只改 top 或 margin-top ——后者会触发 layout，而前者走 GPU 合成。还有就是，requestAnimationFrame 回调里千万别做 DOM 查询，提前缓存好所有 querySelector 结果。
