safariで確認
ウェブアプリの背景画像を設定する
ページに大きさを固定した背景画像を設置してheight: 100%; width: 100%;を設定。
background: url('example.png') no-repeat;
background-size: 420px 750px;
height: 100%;
width: 100%;
この時、背景画像の大きさは固定であり、表示する高さと幅がスマホ画面に合わせて変わり、レイアウトが崩れない！
しかし、実機で確認してみるとレイアウト崩れが、、
問題
フッターが表示された場合、フッターを除いた部分でheight: 100%と認識されるため、フッターの後ろに背景が描画されていない状況になっているみたい。なので、フッターが出たり消えたりすると背景画像が一瞬映らなかったりして崩れます！
こいつが癌↓
解決策
transform: translate(0, 0);を足してあげます！これにより、フッターが出現してしまっても、背景画像の位置が固定できるのでレイアウトが崩れる心配がありません！
transform: translate(0, 0);を追記すると、フッターの高さ分もheightに含まれるので、フッター分の高さも足してあげ、height: 120%;にします！
background: url('example.png') no-repeat;
background-size: 420px 750px;
height: 120%;
width: 100%;
transform: translate(0, 0);
フッターが出現してもしなくても、背景画像のレイアウト崩れがおきなくなりました！