safari下图片从border-radius容器溢出，是因裁剪上下文未稳住；isolation: isolate适用于静态或简单hover动画，-webkit-mask是transform动画唯一稳解，二者不可混用且需严格配齐border-radius、overflow:hidden等必要声明。
直接说结论：Safari 下图片从 border-radius 容器里“炸出来”，不是图片没设圆角，而是父容器的裁剪上下文没稳住——isolation: isolate 和 -webkit-mask 是目前最可靠、兼容性最好的两个解法，但适用场景不同，不能混用或漏配。
为什么 Safari 里图片总从圆角里溢出
这不是 CSS 写错了，是 Safari（尤其是 iOS 15.4–16.4 和 macOS 14+）对裁剪上下文的创建更严格。即使你写了 border-radius: 12px 和 overflow: hidden，只要父容器没形成独立层叠上下文，子元素（比如 <img>）的渲染层就可能“漂”在裁剪边界之外。
常见现象包括：
- 卡片 hover
transform: scale(1.05)时，图片四角突然顶破圆角 - 头像容器
border-radius: 50%，缩放后人像变椭圆甚至露出直角 - Chrome/Firefox 正常，Safari 真机必现
什么时候该用 isolation: isolate
适用于静态圆角或简单 hover 动画（无 transform 缩放/位移），目标是让 overflow: hidden 真正生效。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 必须和
border-radius、overflow: hidden同时写在父容器上，三者缺一不可 - 只加在父容器，不要加在
<img>或其他子元素上 - 若父容器已用了
transform: translateZ(0)或opacity: 0.99，isolation可能冗余，但加上也无害 - 不兼容老 Android WebView（如 UC 12.x），但 iOS 14+ 和 Safari 12.1+ 全支持
典型写法：
.card {
border-radius: 12px;
overflow: hidden;
isolation: isolate;
}
什么时候必须用 -webkit-mask
只要涉及 transform 动画（scale、translate3d 等），isolation 就不够了——Safari 在 transition 过程中会短暂“松开”裁剪边界。-webkit-mask 是 WebKit 原生遮罩，与动画生命周期完全解耦，目前唯一稳解。
- 必须同时写
-webkit-mask和mask，前者保 Safari，后者保未来标准 - 遮罩半径必须和
border-radius数值一致（如12px），单位不能省 - 必须配
mask-size: 100% 100%和mask-repeat: no-repeat，否则缩放时遮罩会拉伸或偏移 - SVG 方式比
radial-gradient更精准，尤其适合非对称圆角（如border-radius: 8px 16px 0 12px）
SVG 示例（适配 border-radius: 12px）：
.card {
border-radius: 12px;
overflow: hidden;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='black' rx='12' ry='12'/%3E%3C/svg%3E");
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='black' rx='12' ry='12'/%3E%3C/svg%3E");
mask-size: 100% 100%;
mask-repeat: no-repeat;
}
容易被忽略的关键细节
这两个方案都不是“贴上就完事”。最容易翻车的地方是：
-
border-radius值必须是确定的数字（如12px），不能是inherit、unset或 calc() 衍生值，否则 SVG 遮罩或isolation都会失效 - 如果父容器用了
backface-visibility: hidden，它可能和isolation冲突导致闪屏，优先删掉它 -
-webkit-mask对背景图无效，若需裁剪背景渐变，还得额外加background-clip: padding-box - 所有方案都要求父容器有明确高度或内容撑开，
min-height: auto或height: fit-content在某些 Safari 版本下会干扰裁剪
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
