見出し画像

[解決]safariでborder-radiusを使ったhover効果がカクカクする…

うるし

「hover効果の動きがおかしい」とある日の相談されました。safariで確認すると確かにおかしい。
Chromeでは普通の動きをするので、safariのみに起こっている現象だと判明した。

ちなみに書いていたHTMLとCSS

<div class="img">
	<img src="hogehoge.png" width="50" height="50" alt="hoge">
</div>
.img{
    border-radius: 50%;
    width: 50px;
    overflow: hidden;
}
img{
    transition: all 0.3s;
}
.img:hover img{
    transform: scale(1.3);
}

マウスオーバー時に画像が拡大されるという効果なのだが、画像が広がったあと、border-radiusが効くというカクカクした動きになっていた。（謎

いろいろ記事を見ていたら、z-indexを使う方法があったので試したが、これもだめだった。

直らないのかなーと諦めかけたが、救いの記事を発見。
imgタグの直上の要素にwill-change: transform;を追加するとうまくいった。

.img{
    border-radius: 50%;
    width: 50px;
    overflow: hidden;
    will-change: transform; /* ←これ */
}
img{
    transition: all 0.3s;
}
.img:hover img{
    transform: scale(1.3);
}

will-changeとは変更が予測されることを助言するコードみたい。
ただ、使いすぎには注意…

また一つ賢くなったうるしでしたとさ。

▼参考ページ


この記事が気に入ったらサポートをしてみませんか？