Question

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

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

.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

您可以使用background-size：

缩放背景

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

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

Answer 2

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

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

当存在边界半径时，背景图像上的缩放转换在Safari中无法正常工作

2 个答案: