移动端 body { overflow-x: hidden } 无效，因 Safari 不将 body 视为裁剪容器；需在最靠近溢出源的有明确尺寸的父容器（如 #panels）上设置 overflow-x: auto 或 hidden，并确保其 width、min-width: 0 等属性正确，必要时 html 和 body 双重设 overflow-x: hidden。
body { overflow-x: hidden } 在移动端为啥不管用
因为移动端浏览器（尤其是 Safari）根本不会把 body 当作真正的裁剪容器——它不创建独立的块级格式化上下文（BFC），且高度/宽度常为 auto，导致 overflow-x: hidden 被直接忽略。你看到的“左右晃动”，其实是子容器（比如一个 #panels 或 .hero）横向撑开后，溢出内容穿透到了视口层级。
- 仅给
body加overflow-x: hidden是无效的，iOS Safari 尤其明显 - 必须把
overflow-x: hidden或overflow-x: auto放在「最靠近溢出源」的、有明确尺寸边界的父容器上 - 常见错误是：超宽元素嵌套在
flex容器里，而该容器没设width、min-width: 0，也没触发 BFC
#panels 这类轮播容器必须显式加 overflow-x
横向轮播、全屏多面板等场景中，真正宽度超限的是类似 #panels-container 的子元素，但它是否被裁剪，取决于它的**直接父容器**——也就是 #panels。这个容器不设 overflow-x，就等于开了后门。
-
#panels { overflow-x: auto; -webkit-overflow-scrolling: touch; }是推荐写法（auto比hidden更稳妥，避免意外截断手势） - 务必确认
#panels本身有明确宽度，例如width: 100vw或width: 100%（但不能依赖父级 flex 的“自动伸展”） - 如果
#panels是display: flex子项，记得加min-width: 0，否则内部长文本会强制撑宽 - 不要删掉
#panels-container { overflow: hidden }—— 它控制的是内部子项溢出，和视口级裁剪不是一回事
html 和 body 都得设 overflow-x: hidden 才保险
有些极端情况（比如绝对定位元素右偏移过大、或某些框架注入的浮动层），即使 #panels 正确设置了，仍可能从 html 层级漏出。这时需要双保险。
- 全局兜底样式必须同时作用于两个标签：
html, body { overflow-x: hidden; } - 注意顺序：这条规则要放在所有其他样式之后，或用
!important确保不被覆盖（尤其当使用 Tailwind 或 CSS-in-JS 时） - 慎用
overflow: hidden简写——iOS WebView 对overflow: hidden auto解析异常，必须拆成overflow-x: hidden; overflow-y: auto; - 如果用了
position: fixed弹层，还要加touch-action: none，否则 iOS 会把拖拽事件透传给 body
图片、iframe、white-space: nowrap 这些特例怎么压住
这些元素自带“抗裁剪”属性，光靠 overflow-x: hidden 不够，得配合针对性修复。
立即学习“前端免费学习笔记（深入）”；
-
<img>默认是 inline 元素，底部有基线间隙，加display: block或vertical-align: top消除 -
<iframe>必须显式设width: 100%; height: 100%，且父容器不能是height: auto - 一行超长英文/数字 +
white-space: nowrap：Safari 优先保字符完整，overflow-x: hidden会被绕过；改用overflow-wrap: anywhere或word-break: break-all（后者慎用） - 如果用了
transform: scale()，裁剪失效——要把 transform 移到子容器上，让父容器真正“框住”内容区域
