根本解法是滚动容器隔离（body overflow:hidden + 子容器 overflow-y:scroll），辅以键盘适配和 sticky 替代方案；ios safari 会主动将 fixed 临时降级为 absolute，导致抖动。
移动端 position: fixed 抖动不是 CSS 写错了，而是 iOS Safari（含微信、QQ 等 WKWebView）在滚动时主动把 fixed 元素临时降级为 position: absolute，定位基准从视口变成最近的滚动祖先——抖动是结果，不是 bug，更不是“加个 translateZ(0) 就能修好”的简单问题。
为什么 transform: translateZ(0) 经常失效
这个声明只在极窄条件下才真正触发独立合成层，多数时候它只是摆设：
-
translateZ(0)必须加在position: fixed元素自身上，加在父容器会让 fixed 退化为 relative - 任意祖先节点有
transform、filter或opacity ，就会创建新 stacking context，fixed 立刻失去视口锚定 - 元素内部含
text-shadow、大border-radius或渐变背景，Safari 可能直接降级回 CPU 渲染 - 和
transition混用，在 iOS 15+ 上容易引发合成不稳定，抖动反而加剧 - 在微信、QQ 等 WebView 中测试——它们内核比系统 Safari 更老，
translateZ(0)基本无效
真机可用的滚动容器隔离方案
这是目前兼容性最好、抖动消失最彻底的做法，绕开 WebKit 对 fixed 的“优化”本身：
-
body设为height: 100vh; overflow: hidden;，切断其滚动能力 -
.scroll-container必须是body的**直接子元素**，且设height: 100vh; overflow-y: scroll; -webkit-overflow-scrolling: touch; - 所有内容（包括
position: fixed导航栏、底部按钮）仍写在body里，只是实际滚动发生在该容器内 - 防滚动条宽度突变：加
body { padding-right: calc(100vw - 100%); }（iOS Safari 16.4+ 支持），老版本需 JS 检测后写死为17px
键盘弹起时 fixed 错位怎么稳住
软键盘压缩的是视觉视口（visual viewport），但 fixed 元素不会自动重算 bottom 值，结果飘在半空：
- 监听
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 不是简单替换属性，它依赖滚动上下文，但对吸顶类场景（如导航栏）更稳定、更语义化：
- 最近的滚动祖先（通常是父容器）必须设
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 上反复加 hack。真机测试最容易被忽略的点是：DevTools 模拟器几乎不复现抖动，iOS 微信、QQ、支付宝 WebView 内核往往比系统 Safari 更老，必须单独测；系统设置里开了“减少动画”，会进一步退化合成行为，测试前务必关闭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
