chrome 中网页出现视觉抖动，常由 `overflow: auto` 在特定布局下触发滚动条动态出现/消失导致重排，将 `overflow: auto` 替换为 `overflow-y: scroll` 可强制保留垂直滚动条，消除抖动。
网页在 Chrome 中出现“屏幕抖动”（screen shaking）是一种典型但易被忽视的渲染问题：页面内容看似轻微晃动、跳动或反复重排，尤其在滚动或鼠标悬停时明显，而在 Firefox、Safari 或 Edge 中却完全正常。该现象极少源于 JavaScript 或 PHP 后端逻辑，也基本与 jQuery 代码无直接关系（除非其动态修改了关键样式），而几乎总是由 CSS 布局与滚动行为交互引发的渲染抖动（layout thrashing） 所致。
核心原因在于 Chrome 对 overflow: auto 的实现机制：当容器内容高度临界于是否需要滚动条时，Chrome 会根据内容尺寸动态决定是否显示滚动条。一旦滚动条出现（占用约 17px 宽度），容器可用宽度瞬间减小 → 内部元素换行或缩放 → 高度变化 → 滚动条又可能消失 → 宽度恢复 → 循环往复……这一“滚动条闪现-消失”循环即表现为肉眼可见的抖动。
✅ 根本解决方案：
避免让 overflow: auto 处于临界状态。推荐统一使用：
/* 推荐：强制显示垂直滚动条，预留空间，杜绝宽度突变 */ height: 20em; overflow-y: scroll; /* 关键：固定显示垂直滚动条 */ overflow-x: hidden; /* 可选：禁用水平滚动，防止意外溢出 */
⚠️ 注意事项：
- 不要仅依赖 <meta name="viewport"> 或 X-UA-Compatible —— 这些标签影响的是响应式适配和 IE 兼容模式，与滚动抖动无关；
- 避免在多个元素上滥用 height + overflow: auto 组合，尤其是嵌套容器（如侧边栏+主内容区）；
- 若需保持“无滚动条”的视觉效果，可结合 CSS 隐藏原生滚动条（但仍保留滚动能力）：
.scroll-container { overflow-y: scroll; /* 隐藏滚动条（Chrome/Edge）*/ &::-webkit-scrollbar { width: 0; } /* Firefox 需额外属性（如 scrollbar-width: none）*/ } - 使用浏览器开发者工具（Elements → Styles）快速定位抖动源：临时禁用疑似元素的 overflow 或 height 样式，观察抖动是否消失；重点关注带内联 style="height: ...; overflow: auto" 的 DOM 节点。
总结：Chrome 页面抖动不是 bug，而是 CSS 渲染特性的副作用。通过将不稳定的 overflow: auto 显式替换为确定性的 overflow-y: scroll（并配合固定高度），即可从根源切断抖动循环——简洁、高效、无需修改 HTML 结构或 JS 逻辑。
