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 原生遮罩：

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• 写法必须包含 -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+ 支持）。