プログラミング

safariでborder-radiusが効かない時はz-indexをつける

cssで角丸にできるborder-radiusを指定した際、safariだとborder-radiusgが効かないケースがありました。

具体的には以下のような場合。

See the Pen
safari+border-radius
by KUBO (@KUBOGEN)
on CodePen.

HTML
<div class=”box”>
 <img src=””>
</box>
CSS
.box {
 width: 100%;
 max-width: 300px;
 height: 200px;
 border-radius: 20px;
 overflow: hidden;
}
.box img {
 width: 100%;
 transition: all .3s ease;
}
.box:hover img {
 transform: scale(1.1);
}

画像をdivで囲っており、divにboder-radiusを指定し、「overflow:hidden;」によって、divに収まらない部分の画像は非表示にしています。

この要素のマウスオーバー時に画像が拡大されるというエフェクトを実装しているのですが、safariで確認してみると、マウスオーバー時に一瞬border-radiusが効かなくなっているのがわかると思います。

このようにsafariでborder-radiusが効かない場合には、border-radiusを指定している要素にz-indexも併せて指定すれば解決できます。

z-indexは要素の重なりを指定するプロパティで、positionプロパティといっしょに使います。

CSS
.box {
 width: 100%;
 max-width: 300px;
 height: 200px;
 border-radius: 20px;
 overflow: hidden;
 position: relative;
 z-index: 1;
}
.box img {
 width: 100%;
 transition: all .3s ease;
}
.box:hover img {
 transform: scale(1.1);
}

Leave a Comment