CSS3適合UA(iOS7等)に伴うbackground-sizeの指定順に注意
Updated / Published
iOS7のレンダリングエンジンからは、backgroundのショートハンドがCSS3仕様対応になりました。CSS3仕様のBackgrounds Shorthandを確認すると、backgorund-sizeも同時に含められるようになっています。ショートハンドでは、値を省略した場合に省略した部分は初期値が適用されることになります。これにより次の場合に問題が発生します。
background-sizeプロパティを先に書いて、backgroudプロパティを後に書いている
background-size:320px auto;
background:#fff url(xx.png) 0 0 no-repeat;この場合、background-sizeプロパティの指定があとのbackgroudショートハンドのbackgroundプロパティで上書きされます（つまり、background-size:auto auto;を指定していることになる）。
解決策
background:#fff url(xx.png) 0 0 no-repeat;
background-size:320px auto;と後に書くだけでOKです。もちろん、
background:#fff url(xx.png) 0 0 / 320px auto no-repeat;とCSS3仕様の書き方をしても良いのですが、こちらはまだ対応していないUAが多いので注意してください。ちなみにデスクトップにおいても Safari は OS X Mavericks の Safari 7と Lion、Mountain Lion の Safari 6.1 からCSS3仕様対応になっているようです。
以上、各プロパティレベルでCSS2仕様適合UAとCSS3仕様適合UAが混在するようになってきているので、とくにスマフォサイト等は一度チェックされることをおすすめします。