Position fixed on chrome mobile causing element to move on scroll up/down
HtmlGoogle ChromeMobileScrollCss PositionHtml 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:
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.
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