CSS过渡导致元素溢出隐藏失效的解决方法：使用border-radius兼容修复

作者：袖梨 2026-05-31

在Safari浏览器中，当border-radius与transition同时使用时，会出现overflow:hidden失效的兼容性问题。本文将深入分析这一现象，并提供可靠的解决方案。

核心结论：Safari浏览器中，border-radius和transition的组合会导致overflow:hidden失效，必须使用-webkit-mask才能确保裁剪效果。

为什么 Safari 的 overflow: hidden 在 transition 中会失效

这个现象源于WebKit渲染引擎在处理过渡动画时，对裁剪区域的计算逻辑存在缺陷。在动画过程中，overflow:hidden的裁剪边界会出现短暂松动，导致子元素从圆角区域溢出。

典型表现包括：

设置了border-radius和overflow:hidden的元素，在缩放动画时出现边缘内容外溢
圆形头像在hover状态下突然变成不规则形状
该问题在最新版Safari中100%可复现

用 -webkit-mask 替代 overflow: hidden 做可靠裁剪

-webkit-mask是WebKit原生支持的遮罩机制，不受过渡动画影响，是目前最稳定的解决方案。

实现要点：

使用radial-gradient代替border-radius，例如：-webkit-mask: radial-gradient(circle at center, #000 0%, #000 12px, transparent 12px)
必须设置mask-size:100% 100%确保缩放时不失真
添加mask-repeat:no-repeat和mask-position:center保证对齐
保留overflow:hidden作为兼容性回退方案

示例代码：

.card {
  border-radius: 12px;
  overflow: hidden;
  -webkit-mask: radial-gradient(circle at center, #000 0%, #000 12px, transparent 12px);
  mask: radial-gradient(circle at center, #000 0%, #000 12px, transparent 12px);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: center;
}
.card:hover {
  transform: scale(1.05);
}