title: White area on fixed background when scrolling on ios
body: <p>My aim is to have a scaled background on iOS/Android that doesn't have to rescale after user scrolls down (and the address bar disappears). I found several questions with useful answers but somehow I keep having annoying behaviour on my iPhone. I use Bootstrap.</p>
  
  <p>Here's my simplified HTML</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
     &lt;div id="background-img"&gt;&lt;/div&gt;
     &lt;div id="layout" class="container"&gt;
     &lt;div id="content-main" class="col-xs-12"&gt;
        &lt;p&gt;Some text here&lt;/p&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here's my css</p>
  
  <pre><code>html {
    height: 100%; }
  
  body {
    position: relative;
    /* required for scrollspy */
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 30px;
    font-weight: normal;
    height: 100%;
    color: white;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    /* smooth scrolling on ios */ }
  
  #background-img {
    width: 100%;
    top: 0;
    left: 0;
    bottom: -80px;
    position: fixed;
    z-index: -1;
    background: url("http://www.casapanorama.nl/sites/all/themes/casapanorama/images/bg-klaprozen-1-w1000.jpg") no-repeat center center;
    background-size: cover;
  }
  #content-main { //nothing fancy }
  </code></pre>
  
  <p>Everything runs fine on desktop. But when I open the site on ios (chrome or safari - makes no difference) I get a white bar on the bottom of the screen when I scroll down. The bar disappears when scrolling has stopped. You can try it yourself on mobile at: <a href="https://jsbin.com/rudetokoxu" rel="nofollow noreferrer">https://jsbin.com/rudetokoxu</a></p>
  
  <p>I tried solutions posted here:
  <a href="https://stackoverflow.com/questions/22741143/css-background-stretches-to-fill-height-in-ios-but-there-is-white-space-on-scrol">CSS background stretches to fill height in iOS but there is white space on scroll</a>. Solution here seems logical. I even tried setting the height of the background div to 200% but to no avail.</p>
  
  <p>Also tried:
  <a href="https://stackoverflow.com/questions/18773174/mobile-ios-google-chrome-address-bar-behaviour">mobile IOS Google chrome address bar behaviour</a>
  and here:
  <a href="https://stackoverflow.com/questions/24944925/background-image-jumps-when-address-bar-hides-ios-android-mobile-chrome">Background image jumps when address bar hides iOS/Android/Mobile Chrome</a>
  including the js solutions (it seemed that some of them did not work anymore so I did not try all the js solutions) and anything else I could find on the subject</p>
  
  <p>Please help me solve this or convince me never to think twice about anoying little things like these (cos life is full of them :-) )</p>
  
  <p>BTW: this site has the same problem on mobile: <a href="http://www.laregiondesmusees.fr" rel="nofollow noreferrer">http://www.laregiondesmusees.fr</a>, but this site does not suffer: <a href="http://www.heartkids.co.nz" rel="nofollow noreferrer">http://www.heartkids.co.nz</a></p>