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.

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.

• javascript
• html
• css
• google-chrome
• android-chrome

• I think this is intended: developers.google.com/web/updates/2016/12/url-bar-resizing – Tiberiu Maxim Commented Sep 4, 2018 at 10:31
• 7 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 – James Commented Sep 11, 2018 at 2:13
• 5 You're right. You also might want to have a look here css-tricks.com/the-trick-to-viewport-units-on-mobile – Tiberiu Maxim Commented Sep 15, 2018 at 16:17

3 Answers 3

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;
}

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.

Only you need add

body{
 padding-bottom: 52px;
}