hoverでbackground-imageを切り替えたときの画像のチラつきが気になる

↓これのこと*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:チラつかないときはブラウザキャッシュを削除してみてください