70

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.

0

6 Answers 6

199

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

<meta name="viewport" content="minimum-scale=1"/>
8
  • 2
    this worked, also the position:sticky worked for me as well (without this)
    – qodeninja
    Jun 25, 2018 at 4:29
  • 3
    And to add to that: in my case it seemed like Chrome adjusted the scale to get some element into view that was sticking out horizontally. If you have an unexpected horizontal scrolling in addition to this issue, then that is probably the root cause of the weird vertical scroll as well.
    – Thomas
    Nov 2, 2018 at 10:13
  • 3
    but using minimum-scale=1 removes the responsiveness of the website, so how to correct that?
    – sqlchild
    Jun 24, 2019 at 4:26
  • 2
    Same problem using position fixed. Changed my meta tag to: <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/> so i just added minimum-scale=1 to the default of a create react app Jun 5, 2022 at 17:50
  • 1
    this doesnt work for me in 2022 in chrome mobile Jun 30, 2022 at 9:24
49

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.

4
  • 3
    Thanks, literally beat myself up for a few hours trying to figure it out. This one worked! Feb 6, 2021 at 21:50
  • I only needed the height and width attributes. Oct 7, 2021 at 16:34
  • Thank you, I believe this should be the accepted answer!
    – Georges D
    Sep 17, 2022 at 19:00
  • 1
    Any maximum-scale value less than 3 fails accessibility. For me, including only width, initial-scale, and minimum-scale was sufficient to fix the issue.
    – adam0101
    Aug 5 at 15:42
1

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.

2
  • 1
    Be descriptive when answering a question. Mar 15, 2018 at 14:35
  • Following this answer, I used width: 100% and overflow: hidden in my container. It worked. Sep 9, 2021 at 17:54
1

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.

0
1

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.

1

In my case the reason was missing the following CSS:

img {
    max-width: 100%;
}

When i added this CSS then all went well

1
  • The reason why this works is written in the previous response from Surjeet Bhadauriya. Sep 9, 2021 at 17:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.