ios safari 中 100vw 触发左右抖动，是因为其包含滚动条宽度（≈17px），而 body 宽度超视口时会启用隐藏横向滚动，触发弹性回弹；需在 html 上设 overflow-x: hidden，并配合 scrollbar-gutter: stable 等方案综合治理。
100vw 为什么在 iOS Safari 里会触发左右抖动
根本不是 vw 计算错了，而是 100vw 的定义包含滚动条宽度（通常 ≈17px），而 100% 不包含。当页面内容刚好撑满、又因某些元素（比如未设 max-width: 100% 的图片、input[type="number"] 默认内边距、绝对定位溢出）导致 body 实际宽度 > 视口时，浏览器就会悄悄启用横向滚动能力——哪怕滚动条不可见，也会触发 iOS Safari 的弹性回弹逻辑，造成松手后“咔哒”一下的左右抖动。
快速验证方法：
在控制台运行 document.documentElement.scrollWidth > document.documentElement.clientWidth，返回 true 就说明存在隐性横向溢出；再看开发者工具中 html 元素的 computed width，若显示为 376px（iPhone SE 视口是 375px），那多半就是多出了滚动条占位。
overflow-x: hidden 必须加在 html 上才有效
移动端浏览器的根滚动容器是 html，不是 body。给 body 加 overflow-x: hidden 对根级横向滚动毫无约束力，还可能干扰 iOS Safari 的原生弹性滚动行为。
-
html { overflow-x: hidden; }是唯一真正起作用的写法，且必须放在全局 CSS 最顶部 - 如果项目用了 Normalize.css 或其他 Reset，要检查它是否重置了
html的overflow值 - 不要同时给
html和body都加，某些安卓 WebView 会解析冲突，反而触发异常
用 scrollbar-gutter: stable 替代 overflow-y: scroll
强制显示滚动条（overflow-y: scroll）能稳住 100vw 值，但滚动条永远可见，UI 显得冗余，尤其在 macOS/Safari 下破坏悬停显示习惯。
scrollbar-gutter: stable 是唯一能“预留空间但按需显示”的方案，但它只对 html 元素生效，且必须和 overflow-y: auto 配合使用：
- 正确写法：
html { overflow-y: auto; scrollbar-gutter: stable; } - 必须前置
html { overflow-x: hidden; }，否则横向溢出会干扰 gutter 行为 - 旧安卓 WebView 不支持该属性，需用
@supports降级：html { overflow-y: scroll; }@supports (scrollbar-gutter: stable) { html { scrollbar-gutter: stable; overflow-y: auto; } }
fixed 定位元素抖动不是 vw 的锅，但会叠加恶化
即使 html 宽度正常，一个 position: fixed 的弹层如果内容高度超过视口、且没设 overflow-y: auto 或 max-height，用户向上滚动时它会自己触发局部滚动条——这种卡顿常被误认为是整页抖动。
- 检查所有
position: fixed容器，确保其height或max-height受控 - 内部内容若可滚动，显式设置
overflow-y: auto，并搭配-webkit-overflow-scrolling: touch（iOS 旧版需） - 避免在
fixed元素里用width: 100vw—— 它仍会吃滚动条宽度，导致内部计算偏差；inset: 0是更现代、更安全的替代
100vw + input[type="number"] 内边距 + fixed 溢出，三者共存时，单压一个 overflow-x: hidden 很难根治。必须一层层关掉样式、用盒模型高亮定位真凶，而不是一口气全压上。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
