Safari中圆角容器内容“炸出来”是因裁剪上下文不稳，isolation: isolate适用于静态或简单hover动画，-webkit-mask才是transform动画下唯一可靠解法，二者不可混用且需严格匹配参数与配套声明。
Safari 中圆角容器里内容“炸出来”，不是 border-radius 没生效，而是裁剪上下文没稳住——isolation: isolate 和 -webkit-mask 是目前最可靠的两个解法，但必须按场景选，不能混用。
为什么 overflow:hidden + border-radius 在 Safari 里失效
这不是 CSS 写错了，是 Safari（尤其是 iOS 15.4–16.4 和 macOS 14+）对裁剪上下文的创建更严格。即使写了 border-radius 和 overflow: hidden，只要父容器没形成独立层叠上下文或合成层，子元素（比如 <img>、带 transform 的卡片）就可能渲染在裁剪边界之外。
- 常见现象：hover 时
transform: scale(1.05)，图片四角顶破圆角；头像border-radius: 50%缩放后变椭圆甚至露直角 - 根本原因：子元素用了
position: absolute、transform、will-change或opacity，触发了新层叠上下文，导致overflow: hidden只裁直接子元素，不裁脱离文档流的内容 - Chrome/Firefox 正常 ≠ Safari 正常，真机必现，模拟器不一定复现
该用 isolation: isolate 还是 -webkit-mask
二者解决的是不同层级的问题，选错就白配：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
-
isolation: isolate适用于静态圆角或简单 hover 动画（无transform缩放/位移），目标是让overflow: hidden真正生效。必须和border-radius、overflow: hidden同时写在父容器上，三者缺一不可 -
-webkit-mask是唯一能稳住 transform 动画的方案。只要父容器或子元素用了scale、translate3d等，isolation就会失效——Safari 在 transition 过程中会短暂“松开”裁剪边界 - 不能同时写
isolation和-webkit-mask，会冲突；也不能只写-webkit-mask不写mask，否则未来标准不兼容
怎么写 mask 才不翻车
-webkit-mask 看似一行代码，参数错一个就失效：
立即学习“前端免费学习笔记（深入）”；
- SVG 中的
rx/ry必须和 CSS 的border-radius数值完全一致（单位px不能省），比如border-radius: 12px→ SVG 里写rx="12" ry="12" - 必须同时声明：
-webkit-mask: url(...); mask: url(...);，只写前者 Safari 能用，但不符合标准；只写后者现代浏览器支持，Safari 不认 - 必须补全：
mask-size: 100% 100%; mask-repeat: no-repeat;，否则缩放时遮罩拉伸或偏移 - 别用
radial-gradient模拟圆角，非对称圆角（如border-radius: 8px 16px 0 12px）会失准，SVG 是唯一可靠方式
还有哪些容易被忽略的细节
很多问题不是解法不对，是漏了配套声明：
- 父容器必须有明确宽高，flex 或 grid 子项若没设
width/height，overflow: hidden在 iOS 上可能无效 -
<img>自身加border-radius没用，它只影响边框形状，不裁图；真正起作用的是父容器的overflow: hidden - 移动端
input[type="search"]默认有-webkit-appearance: searchfield，会吃掉所有border-radius，必须先写-webkit-appearance: none - 避免嵌套多层
overflow: hidden，iOS 设备上图层过多会导致滚动卡顿，低端机型（如 iPhone 6s）尤其明显
