Safariでborder-radiusを使った角丸表現ができない時の解決方法

画像等をborder-radiusを使って角丸にする方法があります。

私が遭遇したのはこのパターン。divにborder-radiusとoverflowをかけて画像を角丸にトリミングしていました。

<div class="hoge">
  <img src="" alt="">
</div>
<style>
.hoge{
  border-radius: 20px;
  overflow: hidden;
}
</style>

chromeやfirefoxでは問題なく動作したのですが、Safariだけなぜか角丸ができていない。。。

と言うことで、以下を追加すると問題なく表示されました。

position: relative;
z-index: 1;

Safari バージョン15.5

この内容起こった後に、2022 年 5 月 16 日にリリースされたSafariバージョン 15.5ではborder-radiusのバグが問題なく表示される部分とされない部分がありました。

完全に問題なくなったわけではないですので、原因がわかり次第追記します。