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:
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.
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.