iphoneが抱える背景画像cssの問題

CSS on 20 May , 2015

全面背景画像を固定したサイトデザインはインパクトがありますよね。
しかし通常PCサイトで使用する「background-attachment:fix」は
そもそもmobile safariが対応していないため
背景divをfixするなどのハックを使うはめになります。
(いろんなとこで紹介されているので調べてみてください)

背景固定はwebデザインの手法として定着しつつあるから是非
公式には対応してほしいところです。

ちなみに上記ハック方法でも実は問題があったりします。。

「background-attachment:fix」と良く併用するのが
「background-size:cover」

ウインドウサイズに合わせて背景画像を伸縮してくれるすぐれものです。
これ自体はmobile safariも対応しているのですが、、

問題はmobile safariの上下のツールバー。
mobile safariは初期表示からスクロールするとそれを感知して
ツールバーを最小化してくれます。

それによって、
初期表示時のウインドウサイズと
スクロール時のウインドウサイズが
変わってしまいます。

ウインドウサイズが変わることで何が起こるかといいますと、
background-size:cover;
で読み込み時のサイズにぴったりになってる背景が
スクロール時のウインドウサイズ変更についていけず、一瞬背景サイズがカクっと変わってしまうという現象が起きるのです。
(説明しずらい)
これが気持ち悪い。

ちなみにハックして固定していたはずの背景も
スクロール時のウインドウサイズ変更についていけず、一瞬元の固定位置を維持しちゃいます。
これも気持ち悪い。。

ios7までは
viewportの設定に

「minimal-ui」

という素晴らしいものがありました。

これを設定しておくだけで
mobile safariで上下に出てくるデフォルトのアイコンやら検索バーやらを
隠した状態でサイトを表示してくれたので
アプリのようなUIをサイトに実装する際は重宝したものです。

しかし、ios8以降、minimal-uiがサポートされなくなりました。
まあiphone6は画面が大きいから、ツールバー等を隠す必要がないという判断かもしれませんが。。

なんにしろ
スクロールの生じるサイトで
背景固定や背景フィット表示が上手くいかないってわけですね。

公式対応には期待せず・・
うまい回避方法さがしてみます。