Android Chrome browser address bar shifts fixed element hitareas

Question

It seems Android Chrome has a pretty major bug where sometimes the address bar hiding/showing causes fixed elements to shift their bounding box down/up by the browser's address bar height. So the elements visually stay in the same spot, however, the bounding box actually shifts. This renders clickable areas useless as they don't register anymore (see images below).

The bug is intermittent, but I've been able to replicate it pretty reliably by scrolling quickly and then abruptly stopping the scroll the touching the screen. Has anyone else encountered this and more importantly, does anyone have a solution that avoids this behaviour?

In the first image, notice there is no address bar. It is Hidden by scrolling down. The Bounding box is where it should be.

Now with the address bar, it shifts the entire bounding box down, out of view in this case. This renders the hit area of buttons useless.

Manfred

I think this is intended: developers.google.com/web/updates/2016/12/url-bar-resizing – Orchardist

No. It was a bug that shifted the hit area of fixed position items. The Chrome team has addressed it in a recent release. bugs.chromium.org/p/chromium/issues/detail?id=848122 – Manfred

You're right. You also might want to have a look here css-tricks.com/the-trick-to-viewport-units-on-mobile – Orchardist

Answer 1

I remember faced with a similar problem, as far as I remember the elements that have position:fixed, they also need this:

transform: translate3d(0,0,0);

that is, something like this in the end

element {
    transform: translate3d(0px, 0px, 0px);
    position: fixed;
    top: 0;
}

Anticipative

this did nothing to effect the problem in my case. Didn't downvote because it may be me, or that my case is slightly different. – Sundew

This also does not work for me – Developer

Answer 2

Add an empty div with position: fixed to the page. This fixes the issue as Chrome does some magic and accounts for resizing and positioning.

Dorothy

Answer 3

Only you need add

body{
 padding-bottom: 52px;
}

Maynard