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 或伪元素（除非你真用伪元素做位移）。
<p>如果用 JS 驱动视差，典型结构是：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<pre class="brush:php;toolbar:false;"><div class="parallax-layer" data-parallax="0.4"></div></pre>
<p>那么就只在这个 <code>.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 只是最后一环的提示，不是补丁。
