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

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

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

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

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

典型表现包括：

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

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

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

实现要点：

1. 使用radial-gradient代替border-radius，例如：-webkit-mask: radial-gradient(circle at center, #000 0%, #000 12px, transparent 12px)
2. 必须设置mask-size:100% 100%确保缩放时不失真
3. 添加mask-repeat:no-repeat和mask-position:center保证对齐
4. 保留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);
}

配套优化：避免触发改写裁剪边界的渲染路径

为确保最佳效果，还需要注意以下优化点：

1. 添加will-change:transform创建独立渲染层
2. 仅使用transform和opacity属性实现动画
3. 将transition定义在基础类而非状态类中
4. 为图片元素添加display:block消除基线间隙

通过上述方案组合使用，可以有效解决Safari浏览器中圆角过渡动画的裁剪失效问题，确保在各种场景下都能获得完美的视觉效果。