49

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.

James
  • 1,045
  • 8
  • 17
  • I think this is intended: https://developers.google.com/web/updates/2016/12/url-bar-resizing – Tiberiu Maxim Sep 04 '18 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. https://bugs.chromium.org/p/chromium/issues/detail?id=848122 – James Sep 11 '18 at 02:13
  • 5
    You're right. You also might want to have a look here https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ – Tiberiu Maxim Sep 15 '18 at 16:17

3 Answers3

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;
}
Serg Bakay
  • 87
  • 4
1

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.

northendben
  • 31
  • 3
-1

Only you need add

body{
 padding-bottom: 52px;
}
Alejandro Reyes
  • 332
  • 5
  • 13