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

android google-chrome mobile scale background-size
Treavis picture Treavis · Jun 29, 2014 · Viewed 8.2k times · Source

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

skribbz14 picture skribbz14 · Jul 16, 2014

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

Related questions

Is there any way in Android to force open a link to open in Chrome?

I'm currently testing a webapp developed with lots of jQuery animations, and we've noticed really poor performance with the built-in web browser. While testing in Chrome, the performance of the webapp is unbelievably quicker. I'm just wondering if there was …

Read More
How to detect if web app running standalone on Chrome mobile

Chrome mobile has recently added the ability to add to home screen, similar to iOS. This is cool but it doesn't support it as well as iOS - it doesn't support window.navigator.standalone so you can't detect whether you …

Read More
What's the user agent of Chrome for Android after the user switches it to desktop version?

We know Chrome for Android's user agent is: Mozilla/5.0 (Linux; Android 4.0.4; Galaxy Nexus Build/IMM76B) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.133 Mobile Safari/535.19 We also know the latest version of Chrome for Android provided a new feature which allows users …

Read More