根本原因是uni-app默认让body滚动，而iOS Safari对position: fixed导航栏在body滚动时合成层处理不稳定，导致重排中位置计算延迟或错位；解决方案是禁用body滚动、改用内部容器滚动，并添加transform: translateZ(0)等GPU加速补丁。
导航栏抖动问题在 iOS H5 端最典型，根本不是样式写错了，而是 uni-app 默认让 body 滚动，而 iOS Safari 对 position: fixed 的导航栏在 body 滚动时合成层处理不稳定，导致重排中位置计算延迟或错位。
为什么禁用 body 滚动是第一步
uni-app 的 H5 模式默认把整个页面滚动交给 body，但 iOS WebKit 在 body 滚动时，对 fixed 元素的定位锚点会频繁重算，尤其当导航栏高度受 env(safe-area-inset-top) 或动态状态栏影响时，抖动更明显。必须把滚动权从 body 剥离出来。
- 在
App.vue或根容器上加style="overflow: hidden; height: 100vh;" - 确保
body和html都没有overflow、height或margin干扰 - 移除所有可能触发 body 滚动的全局 CSS，比如
body { overscroll-behavior: contain; }
如何让自定义导航栏真正“钉死”在顶部
仅靠 position: fixed 不够，iOS WebKit 需要明确的 GPU 加速提示才能稳定合成层。
- 给导航栏外层容器（不是内部文字或图标）加
transform: translateZ(0)或will-change: transform - 避免在导航栏内使用
position: absolute子元素做动画，这会触发局部重绘，干扰固定定位 - 确保导航栏的
z-index足够高，且父级没有transform、opacity或filter等创建新层叠上下文的属性 - 不要用
v-show控制导航栏显隐，改用v-if，否则 DOM 残留会破坏 fixed 定位锚点
页面切换时的抖动怎么破
这不是滚动抖动，而是生命周期与渲染时序冲突：页面切换瞬间，原生导航栏先闪一下，自定义组件又晚一帧挂载，造成视觉跳变。
- 在
App.vue的onLaunch和onShow中调用uni.hideTabBar({animation: false})，不带动画参数 - 如果用了自定义导航栏组件，确保它只在
App.vue中挂载一次，而不是每个页面都import+components注册 - 页面
onLoad里不要立即调用uni.setNavigationBarColor，改到onReady或$nextTick后执行 - 检查
pages.json中是否误设了"navigationStyle": "default"，应统一为"custom"
最易被忽略的是：真机调试时打开 Safari 的 “Rendering → Paint Flashing”，能直接看到抖动是否源于某块区域高频重绘；很多所谓“抖动”，其实是导航栏背景渐变色在滚动中被反复重绘造成的视觉残留，换纯色或加 backface-visibility: hidden 就能立刻缓解。
