見出しの背景画像として、幅1pxの画像をリピート表示させようとしたところAndroid標準ブラウザでのみ機能しなかったお話。
ChromeやSafariでは正常に表示されたがAndroid標準ブラウザのみ背景が表示されなかった。
background-sizeを backgroundプロパティにショートハンドで
例) background: url(image.jpg) repeat-x center center / contain rgba(0, 0, 0, 0);
などと書いた場合にAndroid標準ブラウザで機能しないという記事をいくつか見つけたが、今回はきちんと別で書いている。
次に考えられる要因は"サイズ指定自体が間違っている"
結論から言えばこれでした。
他のブラウザでは幅100%か原寸の幅1pxとして認識されていたautoがAndroid標準ブラウザでは読み込まれず、背景画像自体が一切表示されなかった。
今回は下記のように記述を変えることで対応。
もう一つやり方があるとすれば、リピートではなく幅100%にしてしまう方法
Android標準ブラウザでも背景画像が表示される（幅100%指定）
まぁ文字数も大して変わらないのでどちらでも良いと思いますが。
