移动端 fixed 抖动主因是浏览器滚动时合成层处理不一致及 iOS Safari 主动降级 fixed 为 absolute；根本解法是滚动容器隔离（body overflow:hidden + 子容器 overflow-y:scroll），辅以键盘适配和 sticky 替代方案。
移动端 position: fixed 抖动不是 CSS 写错了，而是浏览器在滚动时对合成层处理不一致导致的重绘卡顿或定位跳变。直接加 transform: translateZ(0) 有时有效，但更多时候会失效甚至引发新问题——关键得看场景、设备和上下文。
为什么 translateZ(0) 在 iOS Safari 里经常失灵
iOS Safari（含微信、QQ 等 WKWebView）会主动将 position: fixed 元素在滚动中临时降级为 absolute 定位，这是 WebKit 的渲染优化策略，跟 GPU 加速无关。此时加 transform: translateZ(0) 或 will-change: transform 都无法阻止降级。
-
-webkit-overflow-scrolling: touch必须加在滚动容器上，而不是body；加在body反而触发抖动 - 父级有
transform、opacity 、<code>filter会创建新 stacking context，fixed 元素立即脱离视口锚定 - 第三方 UI 库（如 Ant Design Dialog）内部悄悄加了
transform: translateZ(0)，你没写但已生效 -
will-change: scroll-position已被弃用，Safari 完全不支持，写了等于白写
真机可用的滚动容器隔离方案
把滚动从 body 移到子容器，让 fixed 元素真正“固定”在视口上，是目前兼容性最好、抖动消失最彻底的做法。
-
body设为height: 100vh; overflow: hidden;，切断其滚动能力 -
.scroll-container必须是body的**直接子元素**，且设height: 100vh; overflow-y: scroll; -webkit-overflow-scrolling: touch; - 所有内容（包括
fixed导航栏、底部按钮）仍写在body里，只是实际滚动发生在该容器内 - 防滚动条宽度突变：加
body { padding-right: calc(100vw - 100%); }，iOS Safari 16.4+ 支持，老版本需 JS 检测后写死
键盘弹起时 fixed 错位怎么稳住
软键盘压缩的是「视觉视口（visual viewport）」，但 fixed 元素不会自动重算 bottom 值，结果飘在半空。不能只改 position 类型，得同步控制容器和事件。
立即学习“前端免费学习笔记（深入）”；
- 监听
focusin和blur，检查window.innerHeight是否比初始值小 >200px - 触发时临时切为
position: static+margin-top: auto，让它“沉”到底部内容区 - 根容器必须设
position: relative; height: 100vh; overflow: hidden;，否则absolute也会错位 - iOS 上
100vh在键盘弹出时仍等于物理屏高，需setTimeout(() => window.scrollTo(0, 0), 100)强制恢复锚点
什么时候该放弃 fixed，改用 position: sticky
如果只是吸顶导航、侧边栏等简单场景，sticky 是更现代、更稳定的替代方案，它由浏览器原生优化，无抖动、无遮挡、无键盘错位问题。
- 支持度：iOS 12.2+、Chrome 56+、Firefox 68+，现代项目基本可放心用
- 必须配合父容器
overflow: visible（默认值），若父容器有overflow: hidden或overflow: auto，sticky会失效 - 临界值用
top: 0即可，不要混用top和transform，否则可能触发意外重排 - 慎用
sticky嵌套：外层sticky+ 内层sticky在部分安卓 WebView 中表现不稳定
真正麻烦的从来不是加哪一行 CSS，而是 fixed 元素是否被某个看不见的 transform 父级悄悄劫持了定位基准，或者是否在微信里跑着一个比系统 Safari 还老的 WKWebView 内核。真机测试时，记得同时开微信、QQ、支付宝三个壳，别信模拟器。
