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.
Here's my simplified HTML
<html>
<body>
<div id="background-img"></div>
<div id="layout" class="container">
<div id="content-main" class="col-xs-12">
<p>Some text here</p>
</div>
</div>
</body>
</html>
Here's my css
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 }
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: https://jsbin.com/rudetokoxu
I tried solutions posted here:
CSS background stretches to fill height in iOS but there is white space on scroll. Solution here seems logical. I even tried setting the height of the background div to 200% but to no avail.
Also tried:
mobile IOS Google chrome address bar behaviour
and here:
Background image jumps when address bar hides iOS/Android/Mobile Chrome
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
Please help me solve this or convince me never to think twice about anoying little things like these (cos life is full of them :-) )
BTW: this site has the same problem on mobile: http://www.laregiondesmusees.fr, but this site does not suffer: http://www.heartkids.co.nz
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
