[解決済み] アドレスバーを非表示にすると背景画像が飛び出す iOS/Android/Mobile Chrome

質問

現在、Twitter Bootstrapを使ったレスポンシブなサイトを開発中です。

このサイトでは、モバイル/タブレット/デスクトップにわたってフルスクリーンの背景画像を使用しています。これらの画像は、2つのdivを使用して、それぞれ回転し、フェードアウトします。

ほぼ完璧なのですが、ひとつだけ問題があります。iOSのSafari、AndroidのBrowser、AndroidのChromeを使用すると、ユーザーがページをスクロールしたときに背景がわずかにジャンプし、アドレスバーが隠れることがあるのです。

サイトはこちらです。 http://lt2.daveclarke.me/

モバイルデバイスでアクセスし、下にスクロールすると、画像のサイズ変更/移動が確認できるはずです。

背景のDIVに使っているコードは以下の通りです。

#bg1 {
    background-color: #3d3d3f;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; position:fixed;
    width:100%;
    height:100%;
    left:0px;
    top:0px;
    z-index:-1;
    display:none;
}

すべての提案を歓迎します - これはしばらく私の頭を悩ませている!

解決方法は？

この問題は、URLバーが縮小/スライドして邪魔になり、#bg1と#bg2 divが高さ100%で"固定"であるため、サイズが変わってしまうことに起因して発生します。背景画像は "cover" に設定されているため、包含領域が大きくなると画像のサイズと位置が調整されます。

サイトのレスポンシブ化に基づき、背景は拡大縮小する必要があります。そこで、2つの解決策を考えてみました。

1) #bg1, #bg2 の高さを100vhに設定する。理論的には、これはエレガントなソリューションです。しかし、iOSにはvhのバグがあります( http://thatemil.com/blog/2013/06/13/viewport-relative-unit-strangeness-in-ios-6/ ). この問題を防ぐためにmax-heightを使用することを試みましたが、問題が残りました。

2) ビューポートサイズは、Javascriptによって決定される場合、URLバーの影響を受けません。したがって、Javascriptを使用して、ビューポートサイズに基づいて#bg1および#bg2に静的な高さを設定することができます。これは純粋なCSSではなく、ページロード時に若干の画像ジャンプが発生するため、最良の解決策ではありません。しかし、iOSの"vh"バグ（iOS 7では修正されていないようです）を考慮すると、これが私が見た唯一の実行可能な解決策です。

var bg = $("#bg1, #bg2");

function resizeBackground() {
    bg.height($(window).height());
}

$(window).resize(resizeBackground);
resizeBackground();

余談ですが、iOSやAndroidでは、このリサイズURLバーの問題が非常に多く見受けられます。目的はわかるのですが、変な機能でWebサイトに混乱をもたらすことをよく考えてほしいものです。最近の変更点としては、iOSやChromeでページロード時にURLバーをスクロール操作でquot;hide"できなくなったことが挙げられます。

編集：上記のスクリプトは、背景のサイズ変更を防ぐには完璧に機能しますが、ユーザーがスクロールダウンしたときに顕著なギャップを引き起こします。これは、背景のサイズを画面の高さからURLバーを除いた高さの100%に維持しているためです。Swissが提案するように、高さに60pxを追加すると、この問題は解消されます。URLバーがあるときに背景画像の下部60pxが表示されないということですが、ユーザーがギャップを感じることはなくなるでしょう。

function resizeBackground() {
    bg.height( $(window).height() + 60);
}