Safari中overflow-x: hidden失效的根本原因是根滚动容器为html而非body，且body默认margin: 8px会导致水平溢出；必须写html { overflow-x: hidden; }并重置body { margin: 0; padding: 0; box-sizing: border-box; }。
为什么Safari里overflow-x: hidden会失效抖动
根本不是属性写错了，而是 Safari 的根滚动容器是 html，不是 body。给 body 加 overflow-x: hidden 对视口宽度毫无约束力，浏览器照常把超宽内容“透传”到根层，导致左右滑动、松手回弹、页面抖动。
更隐蔽的问题是：哪怕你写了 html { overflow-x: hidden }，只要 body 有默认 margin: 8px（所有主流浏览器都这么干），左右各 8px 就已突破 100vw，抖动立刻复现。
- 用 DevTools 检查
html和body的实际宽度（看 Computed → width），对比document.documentElement.clientWidth值，差 > 0 就是超宽证据 - 临时加
outline: 1px solid red到html和直接子元素，一眼定位谁在“偷偷变宽” - 特别注意
input[type="number"]、未设max-width: 100%的图片、GSAP 动画中x: 300的绝对定位元素——它们不显示，但参与布局宽度计算
必须写在html上且重置body边距
只有一行真正起效，且必须放在全局 CSS 最顶部（避免被 reset 库覆盖）：
html { overflow-x: hidden; }
body { margin: 0; padding: 0; box-sizing: border-box; }别写 body { overflow-x: hidden }，它在 Safari 上基本无效；也别同时给 html 和 body 都加，某些安卓 WebView 会解析冲突。
立即学习“前端免费学习笔记（深入）”；
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
-
body { margin: 0 }是硬性要求，padding: 8px是严重误导（会人为制造 16px 水平内边距） - 如果项目用了 Normalize.css 或其他 reset，检查它是否重置了
html的overflow，必要时用!important覆盖 - 动态插入内容（如富文本、第三方广告）仍可能引发运行时抖动，此时需配合
MutationObserver监控body子节点变动
overflow-x切换时iOS不触发重绘的 workaround
在 Safari/Chrome iOS 上，用户手指按住屏幕期间，把某个元素从 overflow-x: hidden 改成 overflow-x: scroll，样式变更不会立即生效——这是已知渲染限制，不是你的 JS 写得不够用力。
绕过它的唯一可靠方式是：不改 overflow-x，改 transform 触发强制合成层更新：
.scrollable-trigger {
transform: translateZ(0);
}
.scrollable-trigger.active {
overflow-x: scroll;
/* 不要只靠这行，加下面这句才能让 Safari 立刻响应 */
will-change: scroll-position;
}- 避免在 touchstart/touchmove 中直接调
e.preventDefault()，改用{ passive: true }注册监听器 - 不要依赖
offsetWidth或getBoundingClientRect()强制 reflow——iOS 下它们在触摸持续期间无效 - 真机测试优先，DevTools 的 Mobile View 模拟不出这个行为
横向溢出源不在body，而在嵌套容器
常见误区：以为问题出在全局，其实真正溢出的是某个模块容器（比如轮播图的 #panels-container）。overflow-x 只对**直接子元素**生效，且要求该容器自己已建立 BFC。
正确做法是找到最靠近溢出源的、有明确尺寸边界的父容器，例如：
#panels {
overflow-x: hidden;
width: 100%;
min-width: 0; /* 关键：防止 flex/grid 子项撑宽 */
}- 确保该容器没被
float、position: absolute或display: inline-block破坏 BFC - 禁用
-webkit-overflow-scrolling: touch（iOS 15.4+ 已废弃，加了反而卡顿、fixed 错位） - 如果用了 Grid/Flex，务必加
min-width: 0到父容器，否则子项默认min-width: auto会阻止收缩
最易被忽略的一点：抖动往往不是单一原因，而是 html 层级的 overflow-x + body 默认 margin + 某个 .item 里一张没设 max-width 的图，三者叠加才让宽度超出 1px。修复必须逐层排查，不能只压一个 CSS 规则。
