移动端 fixed 抖动主因是 ios safari 及主流 webview 滚动时将 fixed 临时降级为 absolute，导致定位基准从视口变为父容器；根本解法是将滚动移至子容器并正确设置 -webkit-overflow-scrolling: touch。
移动端 position: fixed 抖动不是 CSS 写错了，而是 iOS Safari 和主流 WebView（微信、QQ、支付宝）在滚动时主动把 fixed 临时降级为 absolute，导致定位基准从视口变成父容器——抖动是结果，不是原因。
为什么加了 translateZ(0) 还抖
常见漏点比写法本身更关键：
-
translateZ(0)必须加在fixed元素自身上，加在父容器会让它直接退化为relative - 任意祖先元素用了
transform、filter或opacity ，就会创建新堆叠上下文，<code>fixed失去 viewport 锚定 - 元素内部含
text-shadow、大border-radius或渐变背景，Safari 主动降级回 CPU 渲染 - 混用
transition（尤其在 iOS 15+），合成层频繁升降，抖动反而加剧 - 在微信、QQ 等 WebView 中测试——它们内核比系统 Safari 更老，
translateZ(0)基本无效
用 position: sticky 替代 fixed 的硬性前提
不是改个属性就行，sticky 依赖滚动上下文，直接替换九成失效：
- 最近的滚动祖先（通常是父容器）必须设
overflow: auto或scroll，不能是hidden或默认visible - 父容器不能有
transform、filter、will-change或overflow: hidden，否则sticky直接失效 -
sticky元素自身不能设left/right偏移，只保留top或bottom，否则定位错乱 - iOS Safari 15.4+ 才完整支持嵌套与
transform共存；老版本会退化为static
把滚动从 body 移到子容器是最稳解法
绕开 fixed 合成策略缺陷本身，副作用最小：
-
body { height: 100vh; overflow: hidden; }—— 切断body滚动通路 -
.scroll-container { height: 100vh; overflow-y: scroll; -webkit-overflow-scrolling: touch; }——-webkit-overflow-scrolling: touch是开关，不加会卡顿 -
.scroll-container必须是body的**直接子元素**，嵌套过深 iOS 可能忽略该属性 - 所有内容（包括
position: fixed导航栏、按钮）仍放在body里，只是实际滚动由这个div承担
防 body 宽度跳变导致的“假抖动”
弹窗打开时 body { overflow: hidden } 让滚动条消失，body 突然变宽约 15px，内容左移——视觉上像 fixed 抽搐：
- 用
body { padding-right: calc(100vw - 100%); }让滚动条始终占位（Safari 16.4+ 支持） - 老版 Safari 需 JS 首次检测后写死：
document.body.style.paddingRight = '17px'; - 别用
margin-right替代——它不参与box-sizing，无法撑开容器宽度 - 该问题在真机上才明显，DevTools 里基本看不出来
真正难处理的从来不是加不加 translateZ(0)，而是祖先节点有没有悄悄创建堆叠上下文、滚动容器是否被正确隔离、以及安全区和键盘弹出时的动态视口变化——这些点漏一个，抖动就回来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
