safari中border-radius与overflow:hidden“失效”是因裁剪逻辑被静默跳过：需父容器同时满足三条件——明确height/max-height值、建立独立渲染层、创建bfc；动画场景下须用-webkit-mask+mask双声明；祖先overflow会穿透干扰，需逐级排查并用will-change或overflow:clip修复。
为什么Safari里border-radius + overflow:hidden看起来“失效”
这不是属性没生效，而是 Safari（尤其是 iOS 15.4+ 和 macOS 14+）在特定条件下静默跳过裁剪逻辑：当父容器没有形成独立渲染层、未触发 BFC、或高度计算结果为 auto 时，overflow: hidden 被忽略，border-radius 就失去了裁剪锚点。你看到的“直角溢出”，其实是内容逃逸出了本该被裁掉的区域。
必须同时满足的三个硬性条件
想让 overflow: hidden 在 Safari 中真正起作用，父容器必须同时具备：
-
height或max-height是明确像素值或视口单位（如height: 200px、max-height: 80vh），height: auto或height: 100%一律无效 - 已建立独立渲染层（通过
transform: rotate(0deg)、transform: translateZ(0)或will-change: transform触发） - 已创建块级格式化上下文（BFC），可用
display: flow-root或overflow: hidden（但后者有副作用）
动画/缩放场景下唯一稳解：-webkit-mask
只要子元素带 transform: scale()、translate3d() 等动画，transform: rotate(0deg) 仍可能在过渡帧中松动裁剪——此时必须用 WebKit 原生遮罩：
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 写法必须包含
-webkit-mask和mask两个声明，缺一不可 - SVG 遮罩中的
rx/ry必须和 CSS 的border-radius数值完全一致（单位不能省） - 必须配
mask-size: 100% 100%和mask-repeat: no-repeat，否则缩放时遮罩会偏移或拉伸 - 保留
overflow: hidden作为其他浏览器的降级 fallback，不要删
最容易被忽略的细节：祖先 overflow 的穿透效应
哪怕目标元素样式完全正确，只要它的任意一个祖先（比如 .modal-overlay、.page-wrapper、甚至锁屏时加在 body 上的 overflow: hidden）设置了 overflow: hidden 或 overflow: auto，Safari 就会把它当作“硬裁剪边界”，直接截断子元素的圆角渲染。
排查方式：getComputedStyle($0.parentElement).overflow 逐级向上执行，直到找到那个“罪魁祸首”。修复不是改目标元素，而是给它加 will-change: transform 脱离该上下文，或把祖先的 overflow: hidden 换成 overflow: clip（iOS Safari 16.4+ 支持）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
