White Area On Fixed Background When Scrolling On Ios

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 an

Solution 1:

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);  
}