ios safari fixed导航栏抖动是webkit为省电将fixed临时降级为absolute所致；稳解是将滚动移至子容器，禁用body滚动并设-webkit-overflow-scrolling: touch。
为什么iOS Safari滚动时fixed导航栏会抖动
这不是CSS写错了，是WebKit为省电主动把position: fixed元素在滚动帧中临时降级成position: absolute，导致坐标同步滞后。表现是导航栏在手指滑动时突然下掉几像素、松手后“弹回”，或在微信/WKWebView里闪一下再定位。桌面Safari、Chrome基本不复现，DevTools模拟器也几乎不触发——必须真机测试。
加transform: translateZ(0)为什么有时更糟
它强制创建合成层，但容易和滚动管线冲突：
- 父级已设
transform、opacity或filter，translateZ(0)会失效，甚至让fixed退化为relative - 搭配
text-shadow、border-radius或transition，iOS可能直接降级回CPU渲染 - 加在body或根容器上，整个页面被强制分层，内存暴涨，Android Chrome 110+可能出现z-index错乱
- 必须加在fixed元素自身上，不能加在父容器
真正稳的解法：把滚动移至子容器
绕开WebKit的fixed优化比硬刚更可靠。核心是切断body滚动通路，让滚动行为由一个受控的子容器接管：
-
body { height: 100vh; overflow: hidden; }——彻底禁用body滚动 -
.scroll-container { height: 100vh; overflow-y: scroll; -webkit-overflow-scrolling: touch; }——该属性是开关，不加会卡顿 -
.scroll-container必须是body的**直接子元素**，嵌套过深iOS可能忽略-webkit-overflow-scrolling - 所有内容（包括fixed导航栏）仍放在
body里，只是实际滚动的是这个div
替代方案：position: sticky不是万能但更语义化
如果导航栏只需吸顶（如top: 0），position: sticky是更现代的选择：
- iOS 12.2+原生支持，无抖动、不遮挡输入框、无需hack
- 必须给sticky元素的**最近滚动祖先**设
overflow: auto或scroll（不能是hidden） - sticky元素本身不能脱离文档流——删掉
left/right偏移，只留top或bottom - 全屏遮罩、弹窗背景等覆盖整个视口的场景，sticky完全不适用
真正容易被忽略的是：Safari DevTools的Layers面板里确认目标元素是否出现在“Composited Layers”中——没出现，说明它根本没进GPU加速；系统开了“减少动画”会进一步退化合成行为，测试前务必关闭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
