cssで角丸にできるborder-radiusを指定した際、safariだとborder-radiusが効かないケースがありました。
具体的には以下のような場合。
See the Pen
safari+border-radius by KUBO (@KUBOGEN)
on CodePen.
HTML
<div class=”box”>
<img src=””>
</box>
<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);
}
.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);
}
.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