Question: I'm currently developing a responsive site using Twitter Bootstrap.

The site has a full screen background image across mobile/tablet/desktop. These images rotate and fade through each, using two divs.

It's nearly perfect, except one issue. Using iOS Safari, Android Browser or Chrome on Android the background jumps slightly when a user scrolls down the page and causes the address bar to hide.

The site is here: <http://lt2.daveclarke.me/>

Visit it on a mobile device and scroll down and you should see the image resize/move. 

The code I'm using for the background DIV is as follows:

```
#bg1 {
    background-color: #3d3d3f;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; position:fixed;
    width:100%;
    height:100%;
    left:0px;
    top:0px;
    z-index:-1;
    display:none;
}

```

All suggestions welcome - this has been doing my head in for a while!!

Answer: 
This is the best solution (simplest) above everything I have tried.

**...And this does not keep the native experience of the address bar**!

You could set the height with CSS to 100% for example, and then set the height to 0.9 \* of the window height in px with javascript, when the document is loaded.

For example with jQuery:

`$("#element").css("height", 0.9*$(window).height());`

)

Unfortunately there isn't anything that works with pure CSS :P but also be minfull that `vh` and `vw` are buggy on iPhones - use percentages.
For those who would like to listen to the actual inner height and vertical scroll of the window while the Chrome mobile browser is transition the URL bar from shown to hidden and vice versa, the only solution that I found is to set an interval function, and measure the discrepancy of the `window.innerHeight` with its previous value.

This introduces this code:

```js
var innerHeight = window.innerHeight;
window.setInterval(function ()
{
  var newInnerHeight = window.innerHeight;
  if (newInnerHeight !== innerHeight)
  {
    var newScrollY = window.scrollY + newInnerHeight - innerHeight;
    // ... do whatever you want with this new scrollY
    innerHeight = newInnerHeight;
  }
}, 1000 / 60);
```

I hope that this will be handy. Does anyone knows a better solution?