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

HtmlGoogle ChromeMobileScrollCss Position

Html Problem Overview

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:


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 {

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

Html Solutions

Solution 1 - Html

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.

Solution 2 - Html

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.

Solution 3 - Html

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.

Solution 4 - Html

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.

Solution 5 - Html

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.

Solution 6 - Html

In my case the reason was missing the following CSS:

img {
    max-width: 100%;

When i added this CSS then all went well


All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionLucas BustamanteView Question on Stackoverflow
Solution 1 - HtmlLucas BustamanteView Answer on Stackoverflow
Solution 2 - HtmlvAhy_TheView Answer on Stackoverflow
Solution 3 - HtmlgluckaView Answer on Stackoverflow
Solution 4 - HtmlTravis FleenorView Answer on Stackoverflow
Solution 5 - HtmlrémyView Answer on Stackoverflow
Solution 6 - Htmluser2812532View Answer on Stackoverflow