iOS Safari中fixed元素滚动跳动是WebKit将fixed降级为absolute所致，根源在于transform、-webkit-overflow-scrolling: touch或body overflow:hidden触发锚点失效；最优解是将滚动移至子容器（.scroll-container），保持body静止，并处理滚动条宽度突变及慎用GPU加速属性。
为什么iOS Safari里fixed一滚动就跳动
这不是你CSS写错了，是WebKit主动把position: fixed降级为position: absolute导致的——只要页面有transform、overflow-scrolling: touch或body { overflow: hidden }，fixed元素就不再锚定视口，而是跟着滚动容器重算位置。手指一滑，它就“抽”一下；松手瞬间，又“弹”回原位。
最稳解法：把滚动从body挪到子容器
硬刚fixed不如绕开它。让body只当壳，滚动交给一个明确的.scroll-container，fixed元素才能真正“固定”在视口上。
html, body { height: 100%; margin: 0; }-
body { height: 100vh; overflow: hidden; }—— 切断body滚动通路 -
.scroll-container { height: 100vh; overflow-y: scroll; -webkit-overflow-scrolling: touch; }——-webkit-overflow-scrolling: touch必须加，否则滚动卡顿 -
.scroll-container必须是body的直接子元素，嵌套过深（比如body > .wrapper > .scroll-container）iOS可能忽略该属性 - 所有内容（包括
position: fixed的导航栏、按钮）仍放在body里，只是实际滚动的是这个div
别漏掉滚动条宽度突变这个隐形坑
弹窗打开时body { overflow: hidden }让滚动条消失，body宽度突然变宽约15px，整个页面内容左移——看着就像fixed在抖。这不是定位问题，是布局跳变。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 用
body { padding-right: calc(100vw - 100%); }自动补足滚动条宽度，让占位始终存在 - 配合
body.modal-open { overflow: hidden; }，视觉隐藏但不释放空间 - 老版Safari（iOS 14以下）不支持
calc动态计算，可用JS首次检测后写死：document.body.style.paddingRight = '17px'; - 别用
margin-right替代，它不参与box-sizing，撑不开容器宽度
慎用translateZ(0)和will-change
transform: translateZ(0)看似能触发GPU加速，但它会创建新层叠上下文，反而让fixed退化为absolute。尤其不能加在body、html或fixed元素的任意祖先上。
立即学习“前端免费学习笔记（深入）”；
- 如果必须加速某个局部元素（比如轮播图），确保它和fixed元素无DOM包含关系
- 更安全的替代是
will-change: transform或will-change: opacity，只提示不强制建层 - 现代项目优先考虑
position: sticky替代简单吸顶场景，它原生稳定，且iOS Safari 15.4+已完整支持 - 测试务必在真机微信、QQ等WKWebView环境跑，它们内核往往比系统Safari更旧
fixed抖动真正的复杂点不在CSS写法本身，而在它和滚动容器、合成层、视口变化之间的耦合——改一处，可能牵出三处隐性失效。最省心的做法，是把滚动权收归子容器，并让body彻底“静止”。
