The resizing behavior of the URL bar is changing in Chrome on Android starting
in version 56. Here’s what you should know:
Lengths defined in viewport units (i.e.
vh) will not resize in response
to the URL bar being shown or hidden. Instead,
vh units will be sized to the
viewport height as if the URL bar is always hidden. That is,
vh units will be
sized to the “largest possible viewport”. This means
100vh will be larger
than the visible height when the URL bar is shown.
The Initial Containing Block (ICB) is the root containing block used when
sizing elements relative to their parents. For example, giving the
element a style of
width: 100%; height: 100% will make it the same size as
the ICB. With this change, the ICB will not resize when the URL bar is hidden.
Instead, it will remain the same height, as if the URL bar were always showing
(“smallest possible viewport”). This means an Element sized to the ICB height
will not completely fill the visible height while the URL bar is hidden.
There is one exception to the above changes and that is for elements that are
position: fixed. Their behavior remains unchanged. That is, a
position: element whose containing block is the ICB will resize in response to the
URL bar showing or hiding. For example, if its height is
100% it will always fill
exactly the visible height, whether or not the URL bar is shown. Similarly for
vh lengths, they will also resize to match the visible height taking the URL
bar position into account.
There are a few reasons for this change:
vh units on mobile. Prior to this, using
units meant a page would reflow jarringly everytime the user changed scroll
Improved user experience. If a page reflows while the user is reading they
may lose their relative location in the document. This is frustrating but also
incurs additional processor usage and battery drain to relayout and repaint
Improved interoperability with Safari on iOS. The new model should match how
Safari behaves, making life easier for web developers. The unintuitive choice
vh units the largest possible viewport but the ICB the smallest
possible is to match Safari’s behavior.
position:absoluteprovided on a scrollable page.
Source: URL Bar Resizing