AndroidのCSSのコーディングハマったので覚書。
背景画像のサイズを指定できるプロパティ「background-size」があるが、これを「background」の値として書いてはいけない。
「background」「background-size」の順番で記載してあげれば問題なし!
・・・と言い切ってしまった感があるけど、具体的には以下のように記述するべし!
おススメ例
background : url("背景画像") no-repeat scroll center center rgba(0, 0, 0, 0);
background-size : contain;
おススメしない例
background : url("背景画像") no-repeat scroll center center / contain rgba(0, 0, 0, 0);
おススメしないやり方だとAndroid標準ブラウザで背景画像が表示されないバグ?の発生を確認しました。
確認したAndroid OSのバージョンは2.1、2.3、4.2といったところです。
AndroidのChromeなら問題なし。
このあたりGoogleなんとかせいやっ!って感じだけど、Androidデフォルトブラウザのことなんてもうどうでもいいのだろうな。
margin-bottomやmargin-topなどを個別に指定するのではなくプロパティをまとめてmargin:0 0 0 10px;のように指定することをショートハンドというらしいですが、今回の問題はbackground-sizeをbackgroundのショートハンドとして指定するとNGという問題のようですな。
使用前に調べたらbackgroundのショートハンドプロパティとして背景画像のサイズを指定する場合はpositionのあとにスラッシュで区切って指定せよとあった。
この「スラッシュで区切って指定せよ」というのがCSSのコーディングで見かけない記述だったので気になってはいただけど、まさかこんな落とし穴があるとは・・・ですよ。
background-positionのピクセル指定も右や下基準の指定だとAndroidは対応していないし、なかなか厄介なり、Android!
あ、ちなみに、以下のように記述したらやはりNGだから気を付けよう。
background-size : contain;
background : url("背景画像") no-repeat scroll center center rgba(0, 0, 0, 0);
background-sizeを記載したあとにbackgroundのショートハンド設定のパターン。
これはショートハンドでサイズを指定していないけど、省略していると思われて「auto」がついているのと同じと解釈するブラウザがあるみたい。
CSSの優先度は後に書いた方が優先されるので、せっかく指定したものがautoで上書きされて想定と異なる事象が起きてアワアワするので気を付けよう。





























