一部のAndroid端末で、CSSのbackgroundで指定した画像が表示されない問題に遭遇。
Android Chromeの機種依存バグ。
(Oppo Reno A(Andorid OS 9)で再現)
PCブラウザやiOSでは問題ない。Androidでも再現しない端末もある。というか、再現する端末の方が少ない模様。
自分の手元端末では再現していないので、詳細な検証はできていない。
対処法
以下の対処により解消した。
どれかまたは複数により解決する可能性がある。
- 背景画像の指定を::before, ::after擬似要素にする
- backgroundプロパティを background-repeat, background-size, background-imageなどに分解して記述
- background-sizeは、
100% autoと縦横２つ指定していたのを、100%と片方のみで指定（場合によっては画像の方を修正する必要があるかもしれない） - z-indexプロパティを指定
このようなつまらないバグによるリソースの浪費を減らすべく、ネットの片隅に投じておく。