Wrong viewport in Chrome mobile devices

Question

I`m trying to make responsive mobile menu, and faced some problems with differents between viewports in Google Chrome mobile and other browsers. See screenshots below:

By green color I paint viewport border. The first image here made in chrome mobile, and the second in default device browser. On mobile IOS the result is the same as on the last image. Red button, book the studio is fixed with bottom 0. And it must always be on the bottom of the screen. So, the questions is:

Why chrome makes the viwport height greater than it realy is?

What is the best way to handle this?

Set viewport meta tag also does not help.

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=0" />

Could someone advice?

Answer 1

Unfortunately this is intentional…

This is a well know issue (at least in safari mobile), which is intentional, as it prevents other problems. Benjamin Poulain replied to a webkit bug:

This is completely intentional. It took quite a bit of work on our part to achieve this effect. :)

The base problem is this: the visible area changes dynamically as you scroll. If we update the CSS viewport height accordingly, we need to update the layout during the scroll. Not only that looks like shit, but doing that at 60 FPS is practically impossible in most pages (60 FPS is the baseline framerate on iOS).

It is hard to show you the “looks like shit” part, but imagine as you scroll, the contents moves and what you want on screen is continuously shifting.

Dynamically updating the height was not working, we had a few choices: drop viewport units on iOS, match the document size like before iOS 8, use the small view size, use the large view size.

From the data we had, using the larger view size was the best compromise. Most website using viewport units were looking great most of the time.

Nicolas Hoizey has researched this quite a bit: https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html

No fix planned

At this point, there is not much you can do except refrain from using viewport height on mobile devices. Mobile Chrome seems to want to adapt this too, although it is not sure if they will follow through.

The only one way to solve this issue is to use this snippet:

height: calc(100vh - 60px); 60px

where 60px is top nav height, which may be different depend of device

Answer 2

Try using the following CSS

bottom: 0;
position: fixed;