background-attachment: fixed 在 iOS Safari 中失效且抖动，因其被浏览器主动禁用、不触发 GPU 合成，导致重绘撕裂；真正可靠方案是改用 transform 驱动的独立元素，并精准控制 will-change: transform 的添加时机与作用对象。
视差滚动在手机上抖动，不是因为没加 will-change，而是加错了地方、加错了时机、或者根本用错了实现方式。
为什么 background-attachment: fixed 在 iOS Safari 里失效又抖动
纯 CSS 的 background-attachment: fixed 视差方案在移动端基本不可靠：它不触发 GPU 合成层，浏览器滚动时反复重绘背景区域；iOS Safari 直接忽略该声明，安卓 WebView 表现不一。DevTools 的 Layers 面板里看不到对应图层，说明它压根没进硬件加速通路。
常见错误现象包括：背景图随页面滚动“撕裂”、边缘模糊、动画卡顿一帧、松手后残留位移感。
- 这不是 CSS 写错，是渲染路径选错了
- 不要试图给父容器加
will-change: background-position——该声明被 Chrome 95+ 明确标记为 deprecated，且浏览器直接忽略 - 真正起作用的是把视差逻辑从 background 剥离，交给 transform 驱动的独立元素
应该给谁加 will-change: transform
只加在**实际执行位移的 DOM 元素**上，比如带 data-parallax 属性的 <div>，而不是它的父容器、body 或伪元素（除非你真用伪元素做位移）。
立即学习“前端免费学习笔记（深入）”；
如果用 JS 驱动视差，典型结构是：
<div class="parallax-layer" data-parallax="0.4"></div>
那么就只在这个 .parallax-layer 上动态加 will-change: transform，其他层级一律不碰。
- 加在父容器上 → 图层建错位置，子元素位移仍走 CPU 渲染
- 加在
::before上但没设transform→ will-change 失效，浏览器标记为 inactive - 用 class 控制比内联样式更稳妥：
.parallax-layer.is-active { will-change: transform; }
什么时候加、什么时候删，比加本身更重要
静态写死 will-change: transform 在 CSS 里等于长期占用 GPU 图层，中低端安卓机跑 3 个以上就会掉帧，iOS Safari 可能白屏。必须配合生命周期管理。
- 用户开始滚动时（
touchstart或首次scroll触发后）才加：el.classList.add('is-active') - 滚动停止 100ms 后自动清理（防抖 +
setTimeout），或监听requestIdleCallback降级兜底 - 绝对不要在
:hover里声明will-change——悬停瞬间升层太晚，第一帧必然卡 - 验证是否生效：打开 Chrome DevTools → Layers 面板，确认只有目标元素新增了图层，且数量可控（建议 ≤ 3 个）
抖动还存在？先关掉这些干扰项
即使 will-change 正确生效，以下设置仍会导致视觉抖动，且和硬件加速无关：
- 视差元素用了
%单位的transform: translateY—— iOS Safari 对小数百分比计算不稳定，改用整数像素值（如translateY(-24px)） - 父容器设了
overflow: hidden或border-radius—— 强制回退软件渲染，will-change彻底失效 - JS 中在
scroll回调里直接读取scrollTop或调用getBoundingClientRect()—— 触发强制同步回流，动画帧直接中断 - 没设
{ passive: true }的 touch 事件监听器 —— iOS Safari 禁用惯性滚动，视差滞后半拍，主观感觉就是“抖”
真正稳定的视差，是把位移收敛到 requestAnimationFrame 回调里，只更新 transform，并确保所有参与元素都设了明确高度（避免 resize 后错位）。will-change 只是最后一环的提示，不是补丁。
