Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 984
Treavis Avatar asked Jun 29 '14 18:06

Treavis


People also ask

Does 100vh work on mobile?

Sadly, the 100vh unite breaks your design on mobile browsers that makes it nearly useless. When in a mobile browser (Chrome + Safari) the address bar is visible, the bottom of the screen gets cut off since mobile browsers incorrectly set 100vh to be the height of the screen without the address bar showing.

Do not use 100vh?

It's best to avoid 100vh and instead rely on javascript to set heights for a full viewport experience. The core issue is that mobile browsers (I'm looking at you, Chrome and Safari) have a “helpful” feature where the address bar is sometimes visible and sometimes hidden, changing the visible size of the viewport.


3 Answers

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

like image 183
skribbz14 Avatar answered Nov 11 '22 19:11

skribbz14


I solved a similar problem using:

$(document).ready(function() {
   var screenHeight = $(window).height();
   $('div_with_background_image').css('height', screenHeight + 'px');
});
like image 33
littlequest Avatar answered Nov 11 '22 18:11

littlequest


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.

like image 25
Rotareti Avatar answered Nov 11 '22 20:11

Rotareti