Position fixed on chrome mobile causing element to move on scroll up/down

Question

I'm facing this strange issue that looks like a bug on Chrome mobile.

I have a div with position:fixed; aligned to the top right corner of the screen. On desktop, it works fine (it stays in place), in mobile, however, the div is moving when I scroll up or down. I made a video to explain it better:

https://www.youtube.com/watch?v=gCgN6ULkcMg

On scroll up works fine

on scroll down, a piece of the div with position:fixed disappears outside the viewport

I tried to isolate the problem on a fiddle, but couldn't reproduce it. So I encapsulated the entire website in a fiddle, and the issue stopped ocurring. I still didn't understand why.

Website isolated in a fiddle: Removed*

Live website: Removed*

Furthermore, I performed some tests on different devices, on the live website:

• Chrome mobile: Bugs
• Chrome desktop: Works fine
• Firefox mobile: Works fine
• Safari mobile: Works fine

Can someone explain me why Chrome Mobile have this issue, while the others don't?

My position:fixed div looks something like this:

div {
  position:fixed;
  top:10px;
  left:0;
  width:100%;
  text-align:right;
}

*Removed the links because it's a client's website. The solution is in the answer below.

Answer 1

I found out.

For some god forsaken reason, my beloved Google Chrome on mobile require minimum-scale=1 on the viewport meta.

<meta name="viewport" content="minimum-scale=1">

It works now.

Answer 2

The problem is with meta tag you must put there

<meta name="viewport" content="height=device-height, 
                      width=device-width, initial-scale=1.0, 
                      minimum-scale=1.0, maximum-scale=1.0, 
                      user-scalable=no, target-densitydpi=device-dpi">

This is because Chrome browser change height of viewport.

Answer 3

If you want the element to start and stay at the top of the page try using

    #header {
          position: sticky;
          top: 0;
    }

That just worked for me, at least in an earlier version of chrome desktop, when fixed was not behaving appropriately. Just be aware that relative positioned elements will not ignore sticky positioned elements like they do fixed.

Not sure if this will help but it's the answer I was searching for when I got to this question.

Answer 4

It's good to check if there is something hanging out your viewport, adjusting the viewport meta tag may not be needed.

If that sticky thing is still wobbling, or just to give the browser a little more time to breath, consider adding

transform: translate3d(0, 0, 0);

This will help you, my friend :D When using z-index too, make sure it's applied always, assuming z-index is no applied non-sticky.

Answer 5

Some of your elements go out of the viewport, therefore Android Chrome auto scale the viewport. Decrease the elements which are bigger like the viewport.