7

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

Community
  • 1
  • 1
jzp74
  • 627
  • 4
  • 9
  • 21

2 Answers2

19

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);  
}
user3621874
  • 236
  • 2
  • 3
  • Bit of a late answer but thanks! It seems that the behaviour I saw in both Chrome and Safari on ios does not exist anymore in Chrome. I can still reproduce in Safari but your suggestion in combination with some of the other tips I mentioned in my original post fix the problem. – jzp74 Jan 02 '16 at 20:57
  • Thanks so much for this answer. So much better than the 1000's of js hacks out there. Cheers! – Dave Chenell Jan 26 '16 at 19:38
0

this should solve it.

body {
  /* fix for iOS Safari */
  transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  background: var(--background);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
Thien Pow Chong
  • 1