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.

score 196 · Accepted Answer · edited Dec 23 '22 at 21:21

196

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

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

edited Dec 23 '22 at 21:21

starball

20,030
7
43
238

answered Jun 21 '17 at 15:16

Lucas Bustamante

15,821
7
92
86

2

this worked, also the `position:sticky` worked for me as well (without this) – qodeninja Jun 25 '18 at 04: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 02 '18 at 10:13
@Thomas you should have posted it as an answer, this is a much better solution :) – OZZIE Jan 30 '19 at 13:57
3

but using minimum-scale=1 removes the responsiveness of the website, so how to correct that? – sqlchild Jun 24 '19 at 04:26
Chrome can force-enable `user-scalable`. and some users use that. So I decided to use JS with `visualViewport` object with setInterval. (`visualViewport` has the resize event but with slow responsibility) – rua.kr Nov 13 '20 at 07:39
Worked just for Chromium/Chrome browsers. This one worked on all different browsers I tested: https://stackoverflow.com/a/51322362/1981328 – Sasanka Panguluri Feb 06 '21 at 21:56
1

Same problem using position fixed. Changed my meta tag to: `` so i just added `minimum-scale=1` to the default of a create react app – Diego H. O'Hagan Jun 05 '22 at 17:50
1

this doesnt work for me in 2022 in chrome mobile – marko kraljevic Jun 30 '22 at 09:24

score 48 · Answer 2 · edited Jul 13 '18 at 10:32

48

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.

edited Jul 13 '18 at 10:32

dhilmathy

2,800
2
21
29

answered Jul 13 '18 at 09:49

vAhy_The

590
6
10

3

Thanks, literally beat myself up for a few hours trying to figure it out. This one worked! – Sasanka Panguluri Feb 06 '21 at 21:50
I only needed the height and width attributes. – carlin.scott Oct 07 '21 at 16:34
Thank you, I believe this should be the accepted answer! – Georges D Sep 17 '22 at 19:00
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 05 '23 at 15:42

glucka · Answer 3 · 2018-03-17T04:49:46.337

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.

edited Mar 17 '18 at 04:49

answered Mar 15 '18 at 14:07

glucka

57
3

1

Be descriptive when answering a question. – Surjeet Bhadauriya Mar 15 '18 at 14:35
Following this answer, I used width: 100% and overflow: hidden in my container. It worked. – Renato Probst Sep 09 '21 at 17:54

score 1 · Answer 4 · answered Jun 18 '18 at 18:36

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.

rémy · Answer 5 · 2019-02-18T16:02:03.467

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.

edited Feb 18 '19 at 16:02

answered Feb 18 '19 at 11:25

rémy

1,026
13
18

score 1 · Answer 6 · answered Jul 28 '21 at 18:39

1

In my case the reason was missing the following CSS:

img {
    max-width: 100%;
}

When i added this CSS then all went well

answered Jul 28 '21 at 18:39

user2812532

73
2
10

The reason why this works is written in the previous response from Surjeet Bhadauriya. – Renato Probst Sep 09 '21 at 17:53

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

6 Answers6

Linked