スマホで背景fixedしたい時のCSSメモ

Mobile Safari等 background-attachment:fixed; が効かない環境でもそれらしいことをやりたい場合の方法として、position:fixed; の全面div要素を背面に敷いておく方法がよく紹介されていました。
少し改良?しつつメモ。

---

サンプル

http://jsrun.it/volkuwabara/w5KY
(スマホからどうぞ)

ソース

css

body::before {
  background:url('bg.png') no-repeat left top;
  background-size: 100% auto;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-bottom: 108px;
  content: "";
  z-index: -1;
}   

説明

• 空のdivは嫌なので背景を敷きたい親要素の::before擬似要素でやった。(上記例ではbody)
• iOS7以降のMobile Safariで、スクロールダウン中に上下のUIが引っ込む時に、その分の背景が埋まらない(touchendしないとheight:100%が更新されない) ので、height:100%;としつつ、この引っ込む差分(デバイス横向きだとこのUIが完全に隠れる) 108px (iOS7は上:64px, 下:44pxだった)を padding にあらかじて足してはみ出させておく。とはいえiOSのことばかりではないので、height:150%;とかにしておくのがてっとり早いかも。
• background-sizeはcoverやcontainにしたかったがブラウザのUIが出たり引っ込んだりするときに背景サイズがガクガク変わって煩わしいので100% autoが素直そう。

その他

あるいは iOS7.1以降 iOS7 ではViewportにminima-ui指定を入れると、デフォルトでUIが隠れた状態でロードされるそうです。

html

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui">

追記(2016/4/22)：
iOS8以降では minimal-ui は廃止されたため、iOS7でしか意味をなしません。

いずれもやりかたがちょっと強引なので、background-attachment:fixed; に対応してくれればいいのになと思いました。
　

---

参考：
・ http://d.hatena.ne.jp/tt_clown/20130819/fixed_background
・ https://w3g.jp/blog/ios7_1_minimal-ui_warning