Safari中overflow: hidden与border-radius+transition组合失效，需用-webkit-mask+SVG遮罩强制裁剪，并优先使用transform/opacity触发动画以避免重排导致的裁剪脱钩。
overflow: hidden 在 Safari 中对 border-radius + transition 失效
这个问题本质是 Safari 渲染引擎（WebKit）在启用 transition 时，对 overflow: hidden 和 border-radius 的组合处理不一致：过渡过程中裁剪区域可能“松动”，导致子元素圆角外的内容短暂溢出。Chrome 和 Firefox 通常表现正常，但 Safari（尤其是 macOS 14+/iOS 17+）复现率高。
常见错误现象：div 设了 border-radius: 12px 和 overflow: hidden，内部放一张图片或带背景色的 span，鼠标悬停触发动画（比如 transform: scale(1.05) 或 width 变化）时，尖角突然“露出来”——不是圆角变直，而是内容冲破裁剪边界。
- 必须给父容器加
-webkit-mask手动补裁剪，这是目前最稳定解法 - 避免仅依赖
overflow: hidden+border-radius做视觉裁剪 - 若用
transform动画，确保父容器有will-change: transform，否则 Safari 可能跳过硬件加速层，加剧裁剪失效
用 -webkit-mask 实现兼容性圆角裁剪
-webkit-mask 是 Safari 原生支持的底层裁剪机制，它比 overflow 更可靠，且与过渡动画无冲突。原理是用一个和容器尺寸、圆角完全匹配的遮罩“盖住”溢出部分。
使用场景：卡片悬停放大、头像缩放、轮播图裁剪、任何需要 border-radius + transition 同时生效的容器。
立即学习“前端免费学习笔记（深入）”；
参数差异：不能直接写 border-radius 值，得用 radial-gradient 或 linear-gradient 模拟圆角；mask-size 必须设为 100% 100%，否则会缩放失真。
/* 推荐写法，适配所有 Safari 版本 */
.card {
border-radius: 12px;
overflow: hidden; /* 保留，作为降级 fallback */
-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");
}- SVG 中的
rx/ry要和 CSS 的border-radius数值一致（单位 px） - 务必同时写
-webkit-mask和mask，前者保 Safari，后者保未来标准 - 不要用
mask-image: radial-gradient(...)，Safari 对渐变 mask 的过渡支持更差
transition 触发属性的选择很关键
不是所有 CSS 属性触发过渡都会引发裁剪 bug。Safari 对重排（reflow）类属性更敏感，而重绘（repaint）类相对安全。
性能影响：用 transform 和 opacity 触发动画几乎不会触发裁剪失效；但改 width、height、padding 或 margin 就大概率出问题——因为它们强制浏览器重新计算布局边界，而 Safari 的 overflow 裁剪逻辑在此刻容易脱钩。
- 优先用
transform: scale()替代width/height缩放 - 用
opacity控制显隐，别用visibility或display - 如果必须改尺寸，加
backface-visibility: hidden强制创建新渲染层，有时能缓解
flex/grid 容器内子项的圆角裁剪要额外注意
当父容器是 display: flex 或 grid，且子项设置了 border-radius + transition，Safari 有时会忽略子项自身的 overflow: hidden，尤其在 align-items: center 或 justify-content: center 场景下。
容易踩的坑：以为给子项加了 overflow: hidden 就万事大吉，结果动画一跑，子项内容从顶部/底部“钻出来”。这不是 bug，是 Safari 对 flex item 渲染顺序的优化导致裁剪时机错位。
- 解决方案：把子项再包一层
div，圆角和overflow都设在外层，动画 applied 到内层 - 或者直接在子项上加
-webkit-mask（同上一节），不依赖overflow - 避免在 flex 容器上同时设
border-radius和overflow: hidden，再让子项撑满——这种嵌套裁剪 Safari 最容易失控
真正麻烦的是 mask 和 transition 的组合在旧版 Safari（如 iOS 15）里 SVG data URL 解析不稳定，所以测试不能只看最新系统。实际项目里，宁可多套一层 DOM，也别赌 Safari 的渲染一致性。
