当有边框半径时，背景图像上的比例过渡在 Safari 中无法正常工作

Question

我有一个父级和子级div子div有一个背景图像。悬停时，图像会缩放，并且变换上有一个过渡。这在除 Safari 以外的所有浏览器中都能正常工作，似乎在悬停时边框半径正在被删除，然后再次添加。任何人都可以建议解决此问题。

.HTML：

<div class="image-box">
  <div class="image"></div>
</div>  

.CSS：

.image-box {
  width: 300px;
  overflow: hidden;
  border-radius: 20px;
}
.image {
  width: 300px;
  height: 200px;
  background: url("http://via.placeholder.com/340x282");
  background-position: center;
  transition: transform 1s ease;
}
.image:hover {
  transform: scale(1.5);
}

https://codepen.io/liannaryan/pen/ZxbZZa

Answer 1

对于有相同问题的任何人来说，解决方案是。

.image-box {
   width: 300px;
   overflow: hidden;
   border-radius: 20px;
   -webkit-border-radius: $border-radius;
   -webkit-mask-image: -webkit-radial-gradient(circle, white, white);
 }