【CSS】background-sizeの記述順に注意しないとiOS7でまずいことになる件

今日から待ちに待ったジョジョの奇妙な冒険第3部のアニメ放送開始です。まぁ、静岡市では放送しないんですけどね！ちくしょう！制作部の錦織です。

background-sizeは、指定した背景画像のサイズや比率を指定できるCSSプロパティです。
プロパティの特性上、スマートフォン用のページを制作する際に、よく使用します。

しかし、この前（といっても結構前か）、実機iPhone（iOS6）で動作確認をしていたら、
background-sizeの指定が効いていない部分がありました。

CSSの記述の仕方にも問題なさそうなのに、なぜ？しかもiOS6では表示されているのに…。

記述順に注意

結果から言うと、iOS7ではbackground-sizeの指定の順番を気をつけないと、
反映されない場合がある模様です。
下記のようにbackground-sizeプロパティの後ろに、backgroundプロパティが使われてると、background-sizeで指定してた値が初期値（auto）に戻ってしまいます。

NGな例

OKな例

つまり、後で指定してあげれば良いです。backgroundプロパティのショートハンドで書いてもうまくいかないっぽいので、注意してください。

スマートフォンのOS別の実機検証はなかなか手間が掛かって大変ですが、
このように、大きく表示方法が変わってしまうような影響を与えてくることもあるので、まだ使われている範囲のOSや機種は、きちんと検証していきたいですね。