iOS Safari中fixed元素滚动抖动是WebKit渲染优化导致的定位降级问题，解决方案是将滚动容器移至内部div并启用-webkit-overflow-scrolling: touch。
fixed元素在iOS Safari里一滚动就抽风
这是WebKit老毛病了：position: fixed 在滚动过程中会因渲染管线优化被临时降级为position: absolute，导致视觉跳动或闪烁。不是你CSS写错了，是Safari主动“帮你省性能”省过头了。
常见现象包括：顶部导航栏滚动时突然下掉几十像素、底部操作栏闪一下再回来、transform: translateZ(0) 也压不住抖动。
- 只影响 iOS Safari（含微信内置WebView、QQ浏览器等基于WKWebView的环境）
- Android Chrome、桌面Safari基本不出现
- 哪怕加了
will-change: transform或backface-visibility: hidden，效果也极不稳定
用-webkit-overflow-scrolling: touch配合body滚动
最稳妥的解法不是硬刚fixed，而是绕开它——把滚动容器从body挪到一个内部div，让fixed元素真正“固定”在视口上。
关键点在于：body设为height: 100vh; overflow: hidden，滚动交给子容器，同时启用Webkit私有滚动优化：
立即学习“前端免费学习笔记（深入）”；
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
html, body {
height: 100%;
margin: 0;
}
body {
overflow: hidden;
}
.scroll-container {
height: 100vh;
overflow-y: scroll;
-webkit-overflow-scrolling: touch; /* 必须加 */
}-
-webkit-overflow-scrolling: touch是开关，不加这句滚动会卡顿，加了才触发原生滚动惯性 -
scroll-container必须是body直接子元素，不能嵌套太深，否则iOS可能忽略该属性 - 所有内容（包括
fixed导航栏）都放在body里，但实际滚动的是这个div，fixed自然就稳了
scroll-behavior: smooth和-webkit-scrollbar无关，别混用
有人试过给body加scroll-behavior: smooth，或者自定义-webkit-scrollbar样式，结果发现完全没用——因为抖动发生在合成层切换阶段，跟滚动行为动画、滚动条样式根本不在一个渲染通路里。
-
scroll-behavior只控制锚点跳转或scrollIntoView()的缓动，不影响持续滚动中的fixed定位 -
-webkit-scrollbar纯属UI装饰，对合成层策略零影响 - 试图用
transform: translate3d(0,0,0)强制GPU加速，反而可能触发更多图层分裂，加重抖动
真要保留body滚动？试试viewport-fit=cover + env()
如果项目已重度依赖body滚动（比如Next.js默认路由滚动），强行改容器成本太高，可尝试兼容性折中方案：
在里加：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">，然后用
env(safe-area-inset-top)微调fixed元素位置：.header {
top: env(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
}- 这不能根治抖动，但能避免刘海屏下
fixed被遮挡后“弹回”的错觉，降低用户感知 - 需搭配
min-height: 100vh防止内容塌陷，否则env()值在部分iOS版本里会失效 - 务必测试 iOS 15.4+，旧版Safari对
env()支持不一致，可能返回0px
真正难搞的从来不是代码怎么写，而是iOS Safari每次系统更新都可能悄悄改掉合成层判定逻辑——上次稳了，不代表下次升级后还稳。
