Prevent fixed-position background-image: cover from resizing in mobile browsers upon address bar hide

Question

Sorry for a lack of example on this one, but I figure it\'s easy enough to understand.

I have a fixed background on my site, which is currently implemented like this

Answer 1

Almost 5 years later, there is finally a fix for this, due to changes in how Safari and now Chrome for Android calculate vh units. Check it out! https://developers.google.com/web/updates/2016/12/url-bar-resizing

I implemented it on this website (can't really show this off on any of the code playgrounds due to them always embedding results in iframes): https://www.cochranesupply.com

Just used the following code on a background element:

#background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-image: url(../images/background.jpg);
    background-size: cover;
    z-index: -1;
}

And that's all there is to it! Just need Chrome for Android 56, or Safari for iOS (not certain which version but this may have been in Safari for a long time now).