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

Question

The problem is that I have a few DIV's positioned absolutely which have background-size: cover; and their height is calculated by javascript to fill 100% of viewport. On every desktop browser and mobile firefox everything is fine, but on mobile chrome address bar (upon appearing/disappearing) changes $(windows).height(); value. That results in quirky background image rescaling every time it does that. Is there a workaround to always display address bar (so the window height value wouldn't change), or some other solution in keeping background-size: cover; scale the same regardless of the address bar?

Answer 1

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