iOS7のbackground-sizeの挙動が違うって言われました。

iOS7がそろそろリリースされますねー

僕のiPod touch 5th だとβ版では動作が重くなってしまって
変更するのに少し迷ってはいますが、一旦アップデートしてみようと思います。

そんな中早速iOS7のbackground-sizeがiOS6までと比べて挙動がおかしいとの報告が、、

調べてみると確かに変。
Retina用の画像を50%縮小していたのですが、
それが機能せず表示領域の倍の大きさになってはみ出してしまっています。

よく写真だけではなくボタン画像やパーツ用でもちゃんとRetina用に画像を使っているかと思いますが、
原因はbackground-imageとbackground-sizeの指定しているクラスが異なった場合にbackground-sizeが機能しない模様でした。

問題の現象

以下記述だとアウトの模様です。

a {
    background-size: 100px 50px;
}
a.bg01 {
    background: url(hoge01.png) no-repeat left top;
}
a.bg02 {
    background: url(hoge02.png) no-repeat left top;
}
a.bg03 {
    background: url(hoge03.png) no-repeat left top;
}

解決策

なのでこう書けば大丈夫でした。

a {
}
a.bg01 {
    background: url(hoge01.png) no-repeat left top;
    background-size: 100px 50px;
}
a.bg02 {
    background: url(hoge02.png) no-repeat left top;
    background-size: 100px 50px;
}
a.bg03 {
    background: url(hoge03.png) no-repeat left top;
    background-size: 100px 50px;
}

※イメージ画像はボタンは1つですがCSSの記述は3つですね、すみませんめんどくさくなったのｄ

「background-imageを指定しているセレクタには必ずbackground-sizeの記述を併記する」
がこの問題のとりあえずの解決策かと。

一瞬ベンダープレフィックスの影響か、、とも思ったんですが、どうやらそこは関係なく。
これ違うクラスというより、上記のように共通セレクタでも起こる現象なので、
すべての画像サイズが同じな場合共通セレクタにまとめて記載することが多いかと思いますが、
そんな場合は一度チェックしてみると良いかもしれません。

って、iOS3かよ！って突っ込んじゃいましたけど。

9/23追記
こちらのサイトでiOS7でbackgroundのショートハンドにbackground-sizeが対応したとの情報が。
つまり共通セレクタは通常先に書くため、その後に書かれる個別のクラス指定のbackgroundのショートハンドでbackground-sizeが上書きされたため、でした。
なので、共通セレクタを使う際は以降のクラスでショートハンドを使用しない、またはbackground-sizeの指定だけ最後に書くと良いと思います。

ショートハンドの中にbackground-sizeを書いてもまだ未対応のレンダリングエンジンありますしね、、
難しいところです。

iOS7では background-size の指定順に注意
https://w3g.jp/blog/studies/css3_background_shorthand