iOS Safari 的 overflow: hidden 需同时满足显式尺寸约束、独立渲染层和 BFC 触发三条件，缺一不可；height: auto 或 height: 100% 在 flex 中常失效，须用具体像素值或 min-height；flex 子项需设 flex-shrink: 1；动画/transform 元素需父容器加 transform: rotate(0deg) 触发合成层；body/html 上设 overflow: hidden 无效，禁滚动需 JS 控制；横向溢出应定位到真正撑宽的容器；absolute/floated 子元素需父容器为定位上下文且尺寸可控；display: flow-root 可建 BFC 但不触发合成层；clip-path: inset(0) 虽底层裁切但有性能损耗。
不是 CSS 写错了，也不是浏览器 bug，而是 iOS Safari 对 overflow: hidden 的生效条件比桌面端更苛刻——它要求父容器同时满足「显式尺寸约束 + 独立渲染层 + BFC 触发」三个前提，缺一不可。
父容器没设 height/max-height 就必然失效
iOS Safari 会直接忽略 overflow: hidden，如果父容器高度是 auto（比如仅靠 flex 或内容撑开）。它不关心你写了什么，只认计算后的像素值。
- 必须写
height: 200px、max-height: 300px或min-height: 100vh这类明确值，height: 100%在嵌套 flex 中大概率算成auto - 用
flex布局时，子项要隐藏溢出，得加flex-shrink: 1，否则默认不收缩，overflow: hidden形同虚设 - 测试时别信模拟器：真机上长文本加载、图片解码后撑高，可能让初始有效的
overflow后续“突然失效”
没触发合成层（compositing layer）导致裁剪脱钩
当子元素用了 transform、opacity 或动画时，Safari 可能不给父容器建独立图层，overflow: hidden 的裁剪就只作用于主文档流，动起来的内容直接“漏”出去。
- 在设置了
border-radius和overflow: hidden的**父容器**上加transform: rotate(0deg)（首选）或transform: translateZ(0) - 别加在子元素上——完全无效，还可能干扰动画节奏
-
will-change: transform效果类似，但在部分 Android WebView 中会被忽略，rotate(0deg)兼容性最稳（IE9+ 都认） - 注意：这个补丁对纯静态内容非必需，但只要涉及任何过渡/缩放/位移，就必须加
body/html 上设 overflow: hidden 基本没用
iOS Safari 不把 body 或 html 当作裁剪容器。下拉刷新、键盘弹出、页面回弹这些系统级交互会绕过你的样式，滚动事件也绑定在 body 上，CSS 层面锁不住。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 禁用滚动要用 JavaScript：记录
document.body.scrollTop，然后设document.body.style.overflow = 'hidden'，关闭时恢复 - 临时遮罩场景，用
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;替代body锁定 - 横向晃动？别只在
body加overflow-x: hidden，找到真正撑宽的容器（比如#panels），在它身上设overflow-x: auto并配width: 100vw和min-width: 0
子元素脱离文档流会让 overflow 彻底失能
position: absolute、float、display: inline 这些都会让子元素“逃出”父容器的 BFC，overflow: hidden 对它们裁剪无效——除非父容器本身是定位上下文且尺寸可控。
- 绝对定位子元素，父容器必须设
position: relative，否则包含块是视口，裁剪边界完全错位 - 图片默认是
inline元素，底部有基线间隙，加display: block或vertical-align: top才能被干净裁剪 - 用
display: flow-root强制创建 BFC（现代方案），但它不触发合成层，动画中仍需补transform - 慎用
clip-path: inset(0)：它是底层像素裁切，不依赖布局，但低端设备有性能损耗
真正难处理的从来不是“怎么写”，而是“在哪写”和“为什么此时必须写”。iOS Safari 的 overflow: hidden 是个协同开关，单点修复往往治标不治本——尺寸、图层、BFC、定位上下文，四个条件里漏掉一个，视觉上就是“失效”。
