Geek Answers Handbook

White area on a fixed background when scrolling on ios

My goal is to have a scaled background on iOS / Android, which should not scale after scrolling the user (and the address bar disappears). I found some questions with useful answers, but for some reason I continue to annoy the behavior on my iPhone. I am using Bootstrap.

Here is 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 is 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 works fine on the desktop. But when I open the site on ios (chrome or safari - it does not matter), I get a white bar at the bottom of the screen when scrolling down. The bar disappears when scrolling is stopped. You can try it yourself on your mobile device: https://jsbin.com/rudetokoxu

I tried the solutions posted here: CSS background is stretched to fill the height in iOS, but there is a space in the scroll . The solution here seems logical. I even tried setting the background height of the div to 200%, but to no avail.

Also tried: the behavior of the IOS Google Chrome mobile browser here too: Background images jump when the address bar hides iOS / Android / mobile Chrome including js solutions (it seemed that some of them didn’t work anymore, so I didn’t try all the js solutions) and all that I could find on this subject

Please help me solve this problem or convince me to never think twice about anomalous little things like these (because life is full of them :-))

By the way: this site has the same problem on mobile devices: http://www.laregiondesmusees.fr , but this site does not suffer: http://www.heartkids.co.nz

+5
source share
1 answer

I feel your pain. If you carefully look at the example that you found where there was no problem with a space ( http://www.heartkids.co.nz ) - the answer was there, but it is difficult to find if you do not know what you are looking for.

You will see that they have applied 2d conversion to the background image. In most cases, using either 2d or 3d transformations on fixed divs with background images gets rid of an unwanted space like this.

This CSS should remove this annoying white bar. Greetings.

 .background-img { transform: translate3d(0,0,0); }
+13
source

More articles:


All Articles