iOS Safari中fixed抖动是WebKit将fixed临时降级为absolute并低频采样所致，最稳解法是将滚动移至子容器：body设height:100vh和overflow:hidden，.scroll-container设height:100vh、overflow-y:scroll及-webkit-overflow-scrolling:touch。
iOS Safari 里 position: fixed 滚动抖动，不是 CSS 写错了，是 WebKit 主动把 fixed 元素临时降级为 position: absolute，靠低频采样同步位置——滚动越快，越容易“掉帧”。硬加 transform: translateZ(0) 常无效，真正稳的解法是绕开它。
为什么 translateZ(0) 大概率白加
这个声明只在极少数干净条件下才触发独立 GPU 合成层，多数情况只是摆设：
-
translateZ(0)必须加在fixed元素自身上；加在父容器（比如body或.app）会让整个子树被包裹进一个合成层，fixed直接退化为 relative 定位 - 任意祖先元素含
transform、filter、opacity < 1，就会创建新层叠上下文，fixed立刻失去视口锚定能力 - 元素内部有
text-shadow、border-radius、overflow: scroll或will-change: scroll-position，Safari 可能直接降级回 CPU 渲染 - 和
transition一起用，在 iOS 15+ 上反而引发合成不稳定
最稳解法：把滚动从 body 移到子容器
WebKit 对 body 滚动下的 fixed 支持极差，哪怕加了 -webkit-overflow-scrolling: touch 也压不住。唯一可靠路径是收归滚动权：
-
body { height: 100vh; overflow: hidden; }—— 切断 body 滚动通路 - 创建
.scroll-container作为body的**直接子元素**（不能嵌套多层），并设：.scroll-container { height: 100vh; overflow-y: scroll; -webkit-overflow-scrolling: touch; } - 所有内容（包括
fixed导航栏、按钮）仍放在body下，但实际滚动的是这个.scroll-container - 确保该容器没有
transform、filter等干扰属性，否则-webkit-overflow-scrolling: touch会被忽略
键盘弹出时 fixed 被顶起？别等 resize
resize 事件在 iOS Safari（尤其 15.4+）中触发率低于 20%，安卓行为也不统一。必须用 focusin/blur 作为唯一可靠入口点：
立即学习“前端免费学习笔记（深入）”；
- 监听所有可聚焦元素：
input、textarea、[contenteditable] -
focusin回调里用setTimeout(() => {}, 0)延迟读取getBoundingClientRect()，否则拿到的是键盘弹出前的旧坐标 - 计算
bottom值用window.innerHeight - inputRect.bottom，不是写死数值 -
blur后立刻清除内联样式，并恢复position: fixed; bottom: 0 - 若支持，优先用
bottom: env(keyboard-inset-bottom, 0px)，但必须配@supports降级，且安卓不支持
真机测试最容易漏掉的三件事
DevTools 模拟器几乎不复现抖动，以下四点不验证等于没测：
- iOS 微信、QQ、支付宝 WebView 内核往往比系统 Safari 更老，要单独测
- 系统设置开了「减少动画」会进一步退化合成行为，测试前务必关闭
- 用 Safari DevTools 的 Layers 面板确认目标元素是否出现在「Composited Layers」里——没出现，说明它根本没被 GPU 加速
-
body宽度跳变（滚动条消失导致突然变宽约 15px）常被误判为fixed抖动，用body { padding-right: calc(100vw - 100%); }防止
抖动问题本质是 WebKit 渲染策略与滚动管线的冲突，不是样式缺陷。能改用 position: sticky 就别碰 fixed；必须用 fixed 时，滚动容器迁移是唯一可控的稳定路径——其他所有 hack 都依赖浏览器版本和运行时状态，不可靠。
