Menu
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
676
To keep your background fixed, scroll, or local in CSS, we have to use the background-attachment property. Background-attachment: This property is used in CSS to set a background image as fixed or scroll. The default value of this property is scroll.
The background-attachment CSS property sets whether a background image's position is fixed within the viewport, or scrolls with its containing block.
background-attachment: fixed in CSS, at best, does not work well in mobile browsers, and at worst is not even supported by the most widely used mobile browsers. You can ditch this idea completely and let the background scroll on small screens using media queries.
It's a known bug in webkit with backface-visibility (and transforms) and any 'fixed' element that has a parent with the backface-visibility property applied will lose its fixed position. There seems to be no fix except to remove the fixed positioned element from that context.
I feel your pain. If you look carefully at the example you found where there was no white space problem (http://www.heartkids.co.nz) - the answer was there, but hard to find unless you know what you are looking for.
You'll see they applied a 2d transform on the background image. In most cases applying either a 2d or a 3d transform on fixed divs with background images gets rid of unwanted white space like this.
This CSS should remove that annoying white bar. Cheers.
.background-img {
transform: translate3d(0,0,0);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With