弹窗抖动实际是body宽度因滚动条消失突变导致内容左移，fixed元素本身未动；解决方案是用padding-right: calc(100vw - 100%)常驻滚动条占位，老版safari需js检测并写死scrollbarwidth。
弹窗抖动不是 fixed 写错了，而是滚动条消失导致 body 宽度突变，内容横向“抽搐”——视觉上像 fixed 元素在抖，实际是它下面的内容在左移。
为什么弹窗一开就“抽一下”
常见操作：document.body.style.overflow = 'hidden' 锁住滚动。但这个动作会让浏览器隐藏滚动条，body 宽度瞬间增加约 15px（滚动条占位消失），所有子元素（包括 position: fixed 弹窗的参照内容区）向左偏移。fixed 元素本身没动，但它锚定的视口内容“滑走了”，造成错觉。
- DevTools 里几乎看不到，真机 Safari / 微信 WebView 才明显
- 即使弹窗用了
transform: translateZ(0)或inset: 0，也压不住这个宽度跳变 - 用
margin-right撑宽无效：它不参与box-sizing，无法保留滚动条占位空间
用 padding-right: calc(100vw - 100%) 常驻滚动条占位
这是目前最干净、无需 JS 的解法，Safari 16.4+ 原生支持：
body {
padding-right: calc(100vw - 100%);
}
-
100vw是视口总宽，100%是body内容宽，差值就是滚动条宽度 - 无论是否出现滚动条，该
padding始终存在，body宽度恒定 - 弹窗打开时设
body.modal-open { overflow: hidden; }即可，不会触发重排抖动
老版 Safari（iOS 14 及以下）必须用 JS 补位
它们不支持 calc(100vw - 100%) 动态计算，得首次检测后写死：
if (window.getComputedStyle(document.body).paddingRight === '0px') {
const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
document.body.style.paddingRight = scrollBarWidth + 'px';
}
- 只执行一次，放在
DOMContentLoaded或首屏渲染后 - 别用
offsetWidth - clientWidth查元素，要查document.documentElement.clientWidth（含滚动条的视口宽） - 后续弹窗开关只需切
overflow: hidden/visible，不再触发布局变化
别踩这些坑
抖动问题容易被归因错误，实际排查时优先排除干扰项：
- 给
body加transform或filter→ 会让所有fixed元素降级为absolute，定位基准丢失 - 弹窗内部用了
text-shadow或大border-radius→ Safari 主动降级回 CPU 渲染，加剧卡顿 - 同时监听
focusin和改bottom值 → 键盘弹起时 fixed 错位是另一类问题，和滚动条抖动无关，别混在一起调 - 在
.modal-overlay上加translateZ(0)→ 无意义，它只是遮罩层，抖动根源在body宽度
真正稳的方案，永远是从布局源头堵住宽度跳变；所有 GPU 加速、合成层优化，都得建立在尺寸稳定的前提下。否则加再多 backface-visibility: hidden，也只是在晃动的画布上描边。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
