↓これのこと*1
なんでチラつくの？
レンダリングのときは読み込まれなくて、hoverのときに初めて画像を読み込んでるから
Networkタブを見てみるとhoverのタイミングで読み込んでるのがわかる
対応策
① preloadで読み込んでおこう
headタグの中にpreloadを指定する
<link rel="preload" href="./images/hover.png" as="image">
あらかじめ読み込んでくれてるので初回hoverでもチラつかない！
preloadって何？
指定したリソースを先に読み込むようにブラウザに指示すること
imageの他にもstyleやscriptなども指定できる
詳しくはMozilla先生に聞いてね
developer.mozilla.org
② background-imageにhoverの時の画像も指定しよう
hoverしたときじゃない方のbackground-imageにhoverしたときの画像も指定して非表示にしておく
button {
background-image: url(./images/normal.png), url(./images/hover.png);
background-size: contain, 0; // 2枚目はsizeを0にしておく
&:hover {
background-image: url(./images/hover.png);
}
}
(環境によるのかもだけど)preload指定してNetworkタブで事前に読み込まれてるのも確認してるのに、何故かチラつくことがあるので②のほうが確実だと思う
感想
正直俺は気にならん
*1:チラつかないときはブラウザキャッシュを削除してみてください
