overflow: hidden 在 ios safari 中并非失效，而是被静默忽略——仅当父容器同时满足显式尺寸、独立渲染层和 bfc 时才生效；height: auto 或 height: 100% 因计算结果为 auto 而被跳过，必须使用 height: 300px、max-height: 80vh 等明确值；flex 子项需加 flex-shrink: 1 才能配合 overflow: hidden 隐藏溢出；vh 单位须真机测试防撑开；border-radius 失效需在父容器加 transform: rotate(0deg) 激活 gpu 裁剪；sticky 失效常因祖先 overflow: hidden/auto/scroll 静默截断，应改用 clip-path: inset(0) 替代；body/html 上设 overflow: hidden 无效，须用 javascript 控制 document.body.style.overflow 并保存 scrolltop；所有补丁缺一不可。
直接说结论：overflow: hidden 在 iOS Safari 中不是“失效”，而是被浏览器静默忽略——它只在父容器同时满足「显式尺寸 + 独立渲染层 + BFC」时才真正起作用，缺一不可。
为什么 height: auto 或 height: 100% 就不生效
iOS Safari 不认计算后为 auto 的高度，哪怕你写了 height: 100%，只要父级没明确像素值，最终结果仍是 auto，overflow: hidden 直接被跳过。
- 必须写死高度：
height: 300px、max-height: 80vh、min-height: 100vh（注意不是height: 100vh，它在 Safari 中可能因地址栏缩放算错） - Flex 容器里子项要收缩隐藏溢出，得加
flex-shrink: 1；否则默认不压缩，overflow: hidden形同虚设 - 用
vh单位时，真机测试比模拟器更关键——加载图片或字体后撑高，可能让初始有效的裁剪“突然漏出来”
为什么加了 border-radius 还是圆角失效
这不是 border-radius 没起作用，而是 Safari 渲染层没激活，导致裁剪逻辑没绑定到 GPU 路径上。动画、transform、opacity 子元素一动，内容就从圆角边缘“钻出去”。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 必须在设置了
border-radius和overflow: hidden的**父容器**上加transform: rotate(0deg)（首选）或transform: translateZ(0) - 别加在子元素上——完全无效，还可能打断动画节奏
-
will-change: transform效果类似，但在部分 Android WebView 中被忽略，rotate(0deg)兼容性最稳（IE9+ 都认） - 静态内容可不用这个补丁；但只要涉及任何缩放、位移、过渡，就必须加
为什么删掉 overflow: hidden sticky 就好了，但又不能真删
因为 Safari 把任意一个设置了 overflow: hidden、overflow: auto 或 overflow: scroll 的祖先（哪怕隔了三层），且自身没滚动内容的容器，当成“粘性边界”，强制把 position: sticky 降级为 static —— DevTools 里看到的 computed position 就是 static，不是没生效，是被截断了。
- 排查方法：选中 sticky 元素 → Computed 面板 → 逐级向上看
overflow-x/overflow-y值，重点找hidden、auto、scroll - 修复方法：把那个祖先的
overflow: hidden替换为clip-path: inset(0)，视觉裁剪效果一致，但不会干扰 sticky - 别写成
clip-path: inset(0px)—— 部分旧版 Safari 解析不稳定 - 如果祖先还有
border-radius，保留它，clip-path不影响圆角渲染
为什么 body 或 html 上设 overflow: hidden 没用
iOS Safari 不把 body 或 html 当作裁剪容器。下拉刷新、键盘弹出、页面回弹这些系统级交互会绕过你的样式，滚动事件也绑定在 body 上，CSS 层面锁不住。
- 禁用滚动必须用 JavaScript：
document.body.style.overflow = 'hidden'，同时记录scrollTop，关闭时恢复，否则页面会跳回顶部 - 做遮罩层时，别操作
body，改用position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden的独立容器 - 弹窗出现时，仅靠
v-if或display: none切换不够，要同步切换body的overflow样式，否则手指一滑就滚到底部 - 测试务必真机验证——模拟器无法复现 iOS 的滚动回弹和 touch 惯性行为
最容易被忽略的一点：所有这些补丁（transform: rotate(0deg)、clip-path: inset(0)、显式高度）必须同时存在，少一个，overflow: hidden 在 iOS Safari 里就只是个摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
