移动端页面抖动主因是视口宽度溢出，html { overflow-x: hidden; } 才有效，因根滚动容器是 html 而非 body；需用开发者工具定位撑宽元素，如 input[type="number"]、未设 max-width 的图片或绝对定位元素。
移动端页面抖动，90%以上不是 JS 或动画问题，而是 CSS 布局失控导致的视口宽度溢出或合成层异常——直接加 overflow-x: hidden 到 body 基本无效，必须定位到根因再动手。
为什么 overflow-x: hidden 加在 body 上没用
因为移动端浏览器的根滚动容器是 html 元素，不是 body。给 body 设 overflow-x: hidden 对横向滚动无约束力，iOS Safari 甚至会因此干扰弹性滚动行为。
-
html { overflow-x: hidden; }才是唯一有效的写法，且必须放在全局 CSS 最顶部 - 如果项目用了 Normalize.css 或其他 Reset，要检查它是否重置了
html的overflow值 - 不要同时给
html和body都加，某些安卓 WebView 会解析冲突，反而触发异常
抖动根源：谁偷偷把页面撑宽了
用开发者工具「检查元素」+「盒模型高亮」悬停 html 或 body，看右侧宽度是否 > 视口宽度（如 iPhone SE 是 375px）。常见“宽度刺客”包括：
-
input[type="number"]在 iOS 上自带微调按钮，会撑宽元素；建议统一重置：input[type="number"] { padding-right: 0; padding-left: 0; } - 图片未设
max-width: 100%，尤其富文本中插入的原始图 - 绝对定位元素（
position: absolute）超出父容器，且父容器没设overflow: hidden -
width: 100vw遇到滚动条占位（哪怕滚动条不可见），实际宽度 = 视口宽 + 滚动条宽
动态内容插入后抖动复发怎么办
静态 CSS 无法覆盖运行时溢出。AJAX 加载、Vue/React 组件挂载、第三方 SDK 注入广告栏等操作，都可能让宽度突变。
立即学习“前端免费学习笔记（深入）”；
- 别只监听
resize，要用MutationObserver监控document.body子节点变动 - 关键操作后（如
v-if切换、innerHTML赋值）主动执行：document.documentElement.style.overflowX = 'hidden'; - 慎用
scrollIntoView({ behavior: 'smooth' })，它可能强制触发布局重排，间接造成瞬时溢出
滚动条出现导致的抖动：用 scrollbar-gutter 替代硬塞 overflow-y: scroll
scrollbar-gutter: stable 只对 html 元素生效，且必须配合 overflow-y: auto 才触发预留空间逻辑。
- 正确写法：
html { scrollbar-gutter: stable; overflow-y: auto; } - 兼容性兜底必须用 CSS 层叠，不能只靠
@supports：html { overflow-y: scroll; } @supports (scrollbar-gutter: stable) { html { overflow-y: auto; scrollbar-gutter: stable; } } - 避免用
calc(100vw - 100%)等 JS 式 hack，真机微信 WebView 渲染不稳定，且在横竖屏切换时容易失效
真正难处理的是那些不报错、不警告、只在真机微信或 QQ WebView 里偶发的抖动——它们往往藏在 transform 创建的新层叠上下文里，或者被 backface-visibility: hidden 意外激活的合成层干扰。这类问题必须在目标环境里连点带滑反复验证，截图对比盒模型数值，而不是凭经验改 CSS。
