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: 
The solution I'm currently using is to check the `userAgent` on `$(document).ready` to see if it's one of the offending browsers. If it is, follow these steps: 

1. Set the relevant heights to the current viewport height rather than '100%'
2. Store the current viewport horizontal value
3. Then, on `$(window).resize`, only update the relevant height values if the new *horizontal* viewport dimension is different from it's initial value
4. Store the new horizontal & vertical values

Optionally, you could also test permitting vertical resizes only when they are beyond the height of the address bar(s). 

Oh, and the address bar does affect `$(window).height`. See: [Mobile Webkit browser (chrome) address bar changes $(window).height(); making background-size:cover rescale every time](https://stackoverflow.com/questions/24479085/mobile-webkit-browser-chrome-address-bar-changes-window-height-making-ba)
[JS "Window" width-height vs "screen" width-height?](https://stackoverflow.com/questions/6255677/js-window-width-height-vs-screen-width-height)
My answer is for everyone who comes here (like I did) to find an answer for a bug caused by the hiding address bare / browser interface.

The hiding address bar causes the resize-event to trigger. But different than other resize-events, like switching to landscape mode, this doesn't change the width of the window. So my solution is to hook into the resize event and check if the width is the same. 

```
// Keep track of window width
let myWindowWidth = window.innerWidth;

window.addEventListener( 'resize', function(event) {

    // If width is the same, assume hiding address bar
    if( myWindowWidth == window.innerWidth ) {
         return;
    }

    // Update the window width
    myWindowWidth = window.innerWidth;

    // Do your thing
    // ...
});

```