Search code examples
htmlgoogle-chromemobilescrollcss-position

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

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

scroll up

On scroll up works fine

scroll down

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.

Solution

  • For some reason, my Google Chrome on mobile required minimum-scale=1 in the viewport <meta/>.

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