Safari浏览器独有Border Radius异常：hover时圆角消失问题求助

这是Safari浏览器一个挺常见的渲染bug——当父元素同时设置了overflow: hidden和border-radius，子元素又通过transform: scale()做缩放变换时，Safari会突然“忘记”应用父元素的圆角裁剪，导致hover时变成直角，移出后又恢复。我之前做电商卡片的时候也踩过这个坑，给你分享几个亲测有效的解决办法：

办法1：给父元素添加微小Transform触发硬件加速 #

这是最简单且兼容性最好的方案，只需要给父容器加一个不影响布局的transform属性，让Safari强制启用硬件加速，就能正确渲染圆角裁剪了：

.img-zoom {
  top: 0;
  left: 0;
  margin: 0;
  display: block;
  width: 100%;
  height: 60%;
  position: relative;
  overflow: hidden;
  border-radius: 12px; /* 替换成你实际的圆角值 */
  /* 添加下面这行，触发Safari硬件加速 */
  transform: translateZ(0);
}

.img-zoom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease; /* 加上过渡让缩放更平滑 */
  transform: scale(1);
}

.img-zoom:hover img {
  transform: scale(1.04);
}

办法2：将Border Radius直接应用在图片上 #

如果你的布局允许，直接把圆角属性加到img元素上，绕开父容器的overflow裁剪逻辑，也能避免这个bug：

.img-zoom {
  top: 0;
  left: 0;
  margin: 0;
  display: block;
  width: 100%;
  height: 60%;
  position: relative;
  overflow: hidden;
}

.img-zoom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
  border-radius: 12px; /* 直接给图片加圆角 */
}

.img-zoom:hover img {
  transform: scale(1.04);
}

办法3：用Clip-Path代替Overflow: Hidden #

如果上面两种方案都不适用，可以尝试使用clip-path属性来实现圆角裁剪，这个方法不受transform缩放的影响：

.img-zoom {
  top: 0;
  left: 0;
  margin: 0;
  display: block;
  width: 100%;
  height: 60%;
  position: relative;
  /* 用clip-path代替overflow: hidden，12px是圆角半径 */
  clip-path: inset(0 round 12px);
}

.img-zoom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.img-zoom:hover img {
  transform: scale(1.04);
}

小提示 #

• 办法1的translateZ(0)或者scale(1)都能触发硬件加速，选哪个都可以，不会影响视觉效果；
• 办法3的clip-path需要注意兼容性，虽然现代Safari支持，但如果要兼容老版本可能需要做降级处理。

内容的提问来源于stack exchange，提问作者Squish