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.