Mobile Webkit browser (chrome) address bar changes $(window).height(); making background-size:cover rescale every time

I know you are speaking of Chrome, but in the case of mobile Safari, new as of ios 7.1, you can add the attribute to the viewport tag "minimal-ui" and this will prevent the navigation bar and the address bar from popping in and out.

Hopefully in the future other browsers, such as Mobile Chrome, will also accept this value.

You can read more here:http://www.mobilexweb.com/blog/ios-7-1-safari-minimal-ui-bugs

I solved a similar problem using:

$(document).ready(function() {   var screenHeight = $(window).height();   $('div_with_background_image').css('height', screenHeight + 'px');});

I wrote a little vanilla JS ES6 npm module to fix the issue:

address-bar-jump-fix

All you have to do is load the module and put a data-attribute on each jumping element.

This is what the script does (simplified):

• When the user starts scrolling the script saves the initial height of each item that has a certain data-attribute. (data-jump-fix='true')
• While the user is scrolling and the viewport is resizing, the script prevents the resizing of all selected elements by forcing their initial heights back on them.

The source is compiled to ES5 to support old browsers.