移动端 overflow: hidden 失效的根本原因是浏览器对可滚动容器的判定逻辑干扰，如iOS Safari会因长文本、图片或绝对定位元素越界而启用内部滚动机制，绕过该声明。
移动端 overflow: hidden 为什么有时留白不生效
根本原因不是 CSS 写错了，而是浏览器对「可滚动容器」的判定逻辑干扰了 overflow: hidden 的实际效果。iOS Safari 和部分 Android WebView 在检测到容器内有可滚动内容（比如长文本、图片、绝对定位元素越界）时，会悄悄启用内部滚动机制，导致 overflow: hidden 被绕过。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确认父容器没有隐式触发滚动：检查是否设置了
touch-action: pan-y或-webkit-overflow-scrolling: touch（后者已废弃但仍有影响） - 给目标容器加
position: relative，避免子元素position: absolute越界后脱离文档流造成“视觉溢出” - 如果容器内有图片或字体加载后撑开尺寸，需在加载完成后再应用
overflow: hidden，否则初始渲染时可能已触发滚动条占位
用 overflow: hidden 配合 width 和 height 才真正可靠
单纯写 overflow: hidden 在移动端常被忽略一个前提：它只对「有明确尺寸约束」的块级容器起作用。Flex 或 Grid 子项若未设宽高，浏览器可能按内容撑开，overflow 就形同虚设。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须显式设置
width和height（或max-width/max-height），例如：width: 100vw; height: 200px; - 慎用
100%高度——父容器若没高度，100%会计算为auto，等同于没设 - 在 Flex 容器中，子项要隐藏溢出，除了自身设
overflow: hidden，还得加flex-shrink: 1，否则默认不收缩
overflow: hidden 在 iOS Safari 中的兼容性陷阱
iOS Safari 对 overflow: hidden 的处理比桌面端更保守，尤其在 body 或 html 根层级使用时，容易被系统手势（如下拉刷新、页面回弹）覆盖，导致“看起来没隐藏”。这不是 bug，是 Safari 主动保留的交互空间。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 永远不要在
body或html上设overflow: hidden来隐藏页面整体溢出；改用固定定位遮罩层 +pointer-events: none控制交互 - 若需临时禁用滚动（如弹窗出现时），用 JavaScript 切换
document.body的style.overflow同时记录scrollTop，关闭时恢复，否则页面会跳回顶部 - 测试时务必真机验证——模拟器常无法复现 iOS 的滚动回弹和 touch 惯性行为
替代方案：用 clip-path 更精准裁切，但注意性能
当 overflow: hidden 因布局复杂失效时，clip-path: inset(0) 是更底层的裁切方式，它直接在渲染层截掉像素，不依赖容器尺寸或滚动上下文。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 基础写法：
clip-path: inset(0);等效于overflow: hidden，但对绝对定位子元素越界也有效 - 兼容性需加前缀：
-webkit-clip-path: inset(0);（iOS 15.4+ 原生支持，旧版需前缀） - 慎用于动画中——
clip-path触发重绘而非重排，但频繁变化仍比overflow消耗更多 GPU 资源
