CSS - スクロール後にiOSブラウザで背景画像のサイズ変更を避ける

Question

現在、iOS上でもfixed属性を維持するために背景画像を持つdivを使用しているウェブサイトで作業しています。コードは以下の通りである：

HTML：

<div id="background" style="background-image: url(bi.jpg);"></div> 

CSS：

#background{ 
    position:fixed; 
    height: 100%; 
    width: 100%; 
    z-index:-1; 
    display:block; 
    background:no-repeat 50% 0%; 
    background-size:cover; 
} 

これは、ほとんどのビューポートサイズのための素晴らしい作品が、iOSのSafariブラウザ上で上部にツールバーが収縮しますユーザーはスクロールダウンします。これによりビューポートの高さが変更され、cover属性はこれを補うようになり、スクロールが完了した後にわずかに新しいサイズにスナップします。背景画像が画面全体を覆っていて、そのスクロール後に変更されないことを確認する方法はありますか？これはいくつかのJSを必要とするかもしれませんが、わかりません。ありがとうございました。

Answer 1

ブラウザがiOSのサファリであるときに実行されるスクリプトを作成することで、この問題の解決方法を見つけました。それは画面の高さを取得し、その高さに背景を設定するので、ビューポートがスクロールでサイズ変更されたときに、画像全体がサイズ変更されずにそのまま続きます。

function checkSafari(){ 
    "use strict"; 
    var height = $(window).height(); 
    var heightAdd = height + 40;   // add __ px to background height 
    var heightAddMore = heightAdd + 30;  // add more for case iphone 
    var userAgent = window.navigator.userAgent; 

    if (userAgent.match(/iPad/i)) { 
     $("#background").css({"background-size":"auto " + heightAdd +"px"}); 
    } 
    else if(userAgent.match(/iPhone/i)) { 
     $("#background").css({"background-size":"auto " + heightAddMore +"px"}); 
    } 
} 

私は姿勢の変化に、この機能を再実行するために別の関数を作ったので、ユーザが向きを変えるときしかし、これはバックグラウンド間違ったサイズになるだろう。

function detectOrientation(){ 
    "use strict"; 
    var userAgent = window.navigator.userAgent; 
    if(userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)){ 
     $(window).on("orientationchange", function(event){ 
      checkSafari(); 
     }); 
    } 
}