iOS Safari 中 overflow: hidden 失效主因是父容器缺显式高度或层叠上下文，需设 height/max-height 并加 transform: translateZ(0) 等触发渲染层，且避免作用于 body/html。
overflow: hidden 为什么在 iOS 上不生效
移动端特别是 Safari（iOS）对 overflow: hidden 的行为有特殊限制：当父容器没有明确的 height 或 max-height，且未触发层叠上下文（stacking context）时，overflow: hidden 可能完全被忽略，导致内容溢出可见。
- 必须给父元素设置显式的高度约束，比如
height: 200px或max-height: 200px，仅靠flex布局撑高不够 - 加
transform: translateZ(0)或will-change: transform强制创建层叠上下文，是 iOS 下最稳定的兜底手段 - 避免在
body或html上直接设overflow: hidden——Safari 会无视它，改用position: fixed+top: 0等替代方案更可靠
滚动容器内 overflow: hidden 失效的典型场景
常见于弹窗、抽屉菜单、下拉选择器等需要「遮盖外部滚动」的交互组件。问题本质不是 overflow 写错了，而是滚动事件穿透到了父级或 body。
- 确保滚动容器本身有
overflow-y: auto（或scroll），同时父级设overflow: hidden—— 二者缺一不可 - 如果使用
position: fixed弹层，需额外加touch-action: none阻止 iOS 默认滚动行为穿透 - Vue/React 中动态显示弹层时，别只靠
v-if或display: none控制，要同步切换overflow: hidden到body，否则手指一滑就滚到页面底部
overflow-x 和 overflow-y 在移动端的兼容性差异
overflow-x: hidden 在多数 Android 浏览器中表现稳定，但 overflow-y: hidden 在 iOS 上极易失效，尤其配合 flex 或 grid 布局时。
- 不要单独依赖
overflow-y: hidden来隐藏纵向溢出；优先用max-height+overflow: hidden -
overflow: hidden visible这类混合写法在 iOS Safari 中会被整体忽略，必须写成完整值如overflow: hidden或overflow: hidden auto - 若需横向隐藏+纵向可滚动，明确写
overflow-x: hidden; overflow-y: auto，不要简写为overflow: hidden auto（部分旧版 WebView 解析异常）
用 overscroll-behavior 防止滚动链式溢出
当内部滚动容器到底部继续拖拽时，页面会跟着一起滚——这不是 overflow 没起作用，而是浏览器默认的“滚动传播”行为。解决它不用 hack，用标准属性。
立即学习“前端免费学习笔记（深入）”；
- 在滚动容器上加
overscroll-behavior-y: contain，即可阻止向上/向下溢出触发外层滚动 - 支持情况：Chrome 63+、Firefox 59+、Safari 16.4+（iOS 16.4+），老版本 iOS 需回退到
touchstart+preventDefault()监听 - 注意：该属性不影响
overflow本身的裁剪效果，只控制滚动传递逻辑，和overflow: hidden是协作关系，不是替代关系
真正难的不是写对 overflow，而是判断当前失效到底是 CSS 层级问题、渲染上下文缺失、还是滚动事件穿透——三者现象相似，但修复路径完全不同。调试时先看 computed styles 里 overflow 是否真的生效，再查父级有没有 height，最后抓 touch 事件确认是否被冒泡带走了。
