Safari视差失效因合成降级，需加translateZ(0)强制硬件加速；scroll事件应监听document.scrollingElement.scrollTop；touchend需补帧防跳变；纯CSS视差仅Chromium支持。
transform实现视差滚动时，为什么在Safari上不动
因为 transform 触发的视差（比如用 translateY 配合 scroll 事件）在 Safari 旧版本（iOS 15.4 及更早、macOS Monterey）中，对 will-change: transform 或非根层叠上下文元素的合成行为不一致，容易被降级为软件渲染，导致卡顿甚至无响应。
- 必须给滚动容器加
transform: translateZ(0)或will-change: transform强制硬件加速（但注意：will-change不要滥用，仅加在真正需要视差的元素上） - Safari 对
scroll-behavior: smooth和transform同时存在时有冲突，如果页面用了平滑滚动，视差层需单独用position: sticky或position: fixed隔离 - 避免在
body上直接监听scroll—— iOS Safari 会抑制 body 滚动事件，改用document.scrollingElement或具体容器（如#main-scroll）
用JS做视差降级时，requestAnimationFrame里该读哪个scrollTop值
读 document.scrollingElement.scrollTop，不是 window.pageYOffset 或 document.body.scrollTop —— 后两者在 Chrome/Firefox 中可能返回 0，尤其启用 scroll-behavior: smooth 或文档声明了 后，实际滚动位置由 <code>scrollingElement 承载。
- 兼容写法：
const scrollTop = document.scrollingElement?.scrollTop || window.pageYOffset - 不要在
raf回调里反复查 DOM（比如每次取offsetTop），应在初始化阶段缓存所有视差元素的基准位置（getBoundingClientRect().top + scrollTop） - 如果视差元素是
position: sticky，它的偏移计算要额外减去 sticky 的生效阈值，否则滚动到临界点时会出现跳变
纯CSS方案（@property + scroll()）为何现在还不能用
因为 scroll() 函数和 CSS @property 驱动的视差目前仅 Chromium 120+ 原生支持（且需开启 flag），Firefox 和 Safari 完全未实现，连实验性前缀都没有。所谓“纯 CSS 视差”现阶段只是规范草案，不是可用方案。
- 别在生产环境尝试
scroll-timeline+animation-timeline组合 —— 报错信息是Invalid CSS property value或直接静默失效 - 社区封装的 polyfill（如
scroll-timeline-polyfill）只模拟 timeline 行为，不解决transform动画卡顿问题，反而增加 JS 负担 - 真想减少 JS，可考虑用 IntersectionObserver 监听进入视口的粗粒度状态，配合 CSS
transition做两级视差（近/远），但无法实现连续视差效果
移动端 touchmove 事件做视差时，为什么手指一抬就跳回原位
因为默认 touch 行为被阻止后，滚动惯性（momentum scroll）丢失，touchend 后没有后续位移事件，而你的 JS 只在 touchmove 中更新 transform，没处理 touch 结束后的过渡补帧。
- 必须监听
touchend，用getPrecedingTouchSpeed()（自己算 delta 时间内的位移变化率）预估剩余滚动距离，并用requestAnimationFrame补完动画 - 别依赖
event.touches[0].clientY—— 它在某些 Android WebView 中返回的是页面坐标而非视口坐标，应统一用event.touches[0].screenY配合window.visualViewport?.offsetTop校正 - 安卓低端机上
touchmove触发频率低（~30fps），建议用{ passive: false }并及时preventDefault()，否则视差延迟感明显
CSS 视差从来不是“加个 transform 就完事”的事——滚动源、合成层、事件时机、设备惯性，四个变量只要一个没对齐，效果就断在用户手指抬起的那一帧。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
