ios safari中body设overflow: hidden会触发fixed元素抖动，因其放弃视口锚定而按文档流重算位置；最优解是将滚动移至子容器并配置-webkit-overflow-scrolling: touch。
为什么给body加overflow: hidden会触发Safari fixed抖动
这不是bug，而是iOS Safari的合成层策略决定的：一旦body被设为overflow: hidden或height: 100%，浏览器就放弃对position: fixed元素做视口级锚定，转而按文档流上下文重新计算位置——滚动时坐标跳变，看起来就像“橡皮跳动”。
常见错误场景包括弹窗遮罩、全屏菜单、侧边栏展开后锁body滚动等。此时哪怕fixed元素本身没动，它也会随body重排“抽搐”一下。
-
body { overflow: hidden }→ 直接触发抖动，且滚动惯性消失 -
html, body { height: 100% }→ iOS Safari 15+开始更敏感，抖动+地址栏收放时100vh错位叠加 - 用
document.body.style.overflow = 'hidden'动态控制 → 每次切换都引发一次重排抖动
把滚动容器从body挪到子div是最稳的解法
绕开问题比硬刚更有效：让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的直接子元素，嵌套过深（比如body > .wrapper > .scroll-container）iOS可能忽略该属性 - 所有内容（包括
fixed导航、按钮）仍放在body里，只是实际滚动的是这个div
用calc(100vw - 100%)防滚动条占位突变
fixed抖动常被误认为是定位问题，其实一半以上是body宽度跳变导致的：弹窗打开时overflow: hidden让滚动条消失，body突然变宽约15px，内容整体左移——视觉上就是“一抽”。
解决方案不是隐藏滚动条，而是让它始终占位：
-
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，无法撑开容器宽度
慎用transform和-webkit-overflow-scrolling的组合
有人想“双重保险”，给fixed元素加transform: translateZ(0)，又在滚动容器上加-webkit-overflow-scrolling: touch，结果抖动更严重——这两个属性在iOS Safari中会互相干扰合成层判定。
真实设备测试表明（iOS 16–17）：
-
-webkit-overflow-scrolling: touch已废弃，且与fixed共存时容易引发定位错乱，尤其在页面有transform动画或filter时 -
transform: translateZ(0)单独用可提升图层稳定性，但若父级有transform或perspective，反而创建新层叠上下文，让fixed退化为relative - 键盘弹出时，
-webkit-overflow-scrolling: touch可能让滚动容器高度计算失准，进一步放大fixed漂移
复杂交互场景下，滚动容器配置的优先级高于单个元素的transform hack；真要兼顾键盘适配，不如用dvh单位 + focusin事件临时切absolute。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
