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.

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