Safari повредил эффект зависания с радиусом границы и переполнением

Question

У меня есть элемент с изображением внутри. У этого элемента есть радиус границы, и мой эффект при наведении - это «увеличение» изображения внутри, но мне нужно применить этот радиус границы. Похоже, проблема здесь в сафари. При наведении курсора на элемент он масштабируется, но во время анимации вы видите, что он «мигает», как будто у него нет границ радиуса, а затем он возвращается. Посмотрите пример (и посмотрите различия в chrome и сафари, я также попробовал это с тегом img и background-image):

.image {
  width: 100px;
  height: 100px;
  border-radius: 25px;
  overflow: hidden;
}
.image img {
  width: 100px;
  transition: all 0.2s;
}
.image:hover img {
  transform: scale(1.1);
}
.background {
  width: 100px;
  height: 100px;
  border-radius: 25px;
  overflow: hidden;
}
.background .img {
  height: 100px;
  background-size: cover;
  transition: all 0.2s;
}
.background:hover .img {
  transform: scale(1.1);
}

<div>As &lt;img&gt; tag:</div>
<div class="image">
  <img src="https://interactive-examples.mdn.mozilla.net/media/examples/grapefruit-slice-332-332.jpg" alt="">
</div>
<br>
<div>As background-image:</div>
<div class="background">
  <div class="img" style="background-image:url('https://interactive-examples.mdn.mozilla.net/media/examples/grapefruit-slice-332-332.jpg');"></div>
</div>