Safariでborder-radiusがhoverアニメーション中に効かない時の対処

こういう時に

// HTML
<div class="img_wrap">
  <img src="/img/sample.jpg" alt="">
</div>

// CSS(SCSS)
.img_wrap {
  border-radius: 30px;
  overflow: hidden;

  img {
    transition: transform 0.3s;
    transform-origin: center center;
  }

  &:hover img {
    transform: scale(1.2);
  }
}

こんな感じでホバーした時に画像をズームアップして表示したい、そして角丸でマスクしたい、そういう時にSafariでのみアニメーション中に角丸がなくなってしまうことがあります。

こうすると治るかも

// CSS(SCSS)
.img_wrap {
  border-radius: 30px;
  overflow: hidden;
  will-change: transform; // 画像をラップしている要素にこれを付けます

  img {
    transition: transform 0.3s;
    transform-origin: center center;
  }

  &:hover img {
    transform: scale(1.2);
  }
}

画像をラップしている要素に will-change: transform; を付けましょう。
これで解決する場合がありますので、他の記事などによくある z-index を使用した方法で治らなかった方はこちらを試してみるといいかもしれないですね。

z-indexを使用した方法の記事
safariでborder-radiusが動いてない時の解決法