CODEWITHSUNDEEP
javascripthtmlcssgoogle-chromeandroid-chrome
James
James

Reputation: 1065

Android Chrome browser address bar shifts fixed element hitareas

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.

Upvotes: 48

Views: 5068

Answers (3)

northendben
northendben

Reputation: 21

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.

Upvotes: 0

Alejandro Reyes
Alejandro Reyes

Reputation: 328

Only you need add

body{
 padding-bottom: 52px;
}

Upvotes: -3

Serg Bakay
Serg Bakay

Reputation: 107

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

Upvotes: 1

Related Questions