【Safari】ホバーアニメーション中にborder-radiusが効かない場合の解決方法

RELEASE / 2024.8.10 UPDATE / 2024.08.08

border-radius

Safari

アニメーション

バグ

ホバー

角丸

ある時、お客さんから「マウスホバーのアニメーション中だけ角丸が取れるんだけど？」と指摘がありました。
提出前にしっかり確認したのにそんなことあるわけない！と思ったけど、Safariで確認してみると確かに指摘されている現象が起こっていました。
普段Google Chromeでコーディングをしているから気が付かなかったこのSafari特有の現象・バグ。
調べてみると少しCSSの指定を追加するだけで直ることが分かりました。
この記事ではSafariでホバーアニメーション中にborder-radiusが効かない場合の解決方法をご紹介したいと思います。

この記事の目次を表示

1 実際の現象・バグ
2 解決方法
3 まとめ

実際の現象・バグ

まずは実際の現象・バグを見てみましょう。
Safari限定で発生するマウスホバーのアニメーション中にborder-radiusが効かない実際の現象・バグはこちら。

<div class="box">
    <img src="https://irodori-design-web.com/blog_image/3362/3362-1.jpg">
</div>

.box {
    width: 100%;
    height: 100vh;
    border-radius: 50%;
    overflow: hidden;
}
.box img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    transition: all .3s ease;
}
.box img:hover {
    transform: scale(1.1);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

CSSがこの指定だとChromeやFirefoxだと特に問題は無いですが、Safariで表示した時だけホバーアニメーション中にborder-radiusが効かず、角丸部分が見えてしまいます。

解決方法

このバグの解決方法はborder-radiusを指定しているタグに以下を追加します。

.box {
    width: 100%;
    height: 100vh;
    border-radius: 50%;
    overflow: hidden;

    /* 以下の2つを追加 */
    position: relative;
    z-index: 1;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

こちらの場合はSafariで表示した際もborder-radiusの指定が効かなくなる現象は解消していると思います。

まとめ

いかがでしたか？
Safari特有のバグ・現象でしたが、 position:relativeとz-index:1を追加するだけで解消しました。
ブラウザごとに若干仕様が違うため、このようなことは度々起こります。
お客さんから指摘されないようにするためにも色んなブラウザで実際に確認するようにしたいですね。