ios safari中fixed抖动是webkit为省电将fixed临时降级为absolute导致坐标同步滞后，真正稳的解法是将滚动移至子容器并设-webkit-overflow-scrolling: touch。
为什么fixed在iOS Safari滚动时会抖动
这不是CSS写错了，是WebKit为省电把position: fixed元素临时降级成position: absolute，导致滚动帧中视口坐标同步滞后。抖动常表现为顶部导航突然下掉、底部按钮闪一下再回来，且只在iOS Safari（含微信、QQ等WKWebView环境）出现，Chrome和桌面Safari基本不复现。
加transform: translateZ(0)为什么有时更糟
它强制创建合成层，但容易和滚动管线冲突，尤其当父级已有transform、opacity或filter时，translateZ(0)会失效甚至让fixed退化为relative定位。同时搭配text-shadow、border-radius或transition，iOS可能直接降级回CPU渲染。
-
translateZ(0)必须加在fixed元素自身上，不能加在父容器 - 若父级已设
transform，fixed会被包裹进另一个合成层，升层失败 - 和
backface-visibility: hidden混用，在某些iOS版本反而抑制合成
真正稳的解法：把滚动从body移到子容器
绕开问题比硬刚更有效。让body只承载内容，滚动交给一个明确受控的.scroll-container，此时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可能忽略该属性 - 所有内容（包括fixed导航栏）仍放在
body里，只是实际滚动的是这个div
替代方案：position: sticky不是万能但更语义化
如果fixed元素只需吸顶/吸底（如导航栏），position: sticky是更现代的选择，iOS 12.2+原生支持，无抖动、不遮挡输入框、无需hack。
- 必须给sticky元素的**最近滚动祖先**设
overflow: auto或scroll（不能是hidden） - sticky元素本身不能脱离文档流——删掉
left/right偏移，只留top或bottom - 全屏遮罩、弹窗背景等覆盖整个视口的场景，
sticky完全不适用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
