Html 固定在 chrome mobile 上的位置导致元素在向上/向下滚动时移动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44679794/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Position fixed on chrome mobile causing element to move on scroll up/down
提问by Lucas Bustamante
I'm facing this strange issue that looks like a bug on Chrome mobile.
我正面临这个奇怪的问题，它看起来像是 Chrome 移动版上的一个错误。
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:
我有一个 div 位置：固定；与屏幕右上角对齐。在桌面上，它工作正常（它保持原位），但是在移动设备上，当我向上或向下滚动时，div 正在移动。我制作了一个视频来更好地解释它：
https://www.youtube.com/watch?v=gCgN6ULkcMg
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
向下滚动时，带有 position:fixed 的一块 div 消失在视口外
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
- Chrome 手机：错误
- Chrome 桌面：工作正常
- Firefox 移动版：工作正常
- Safari 移动版：运行良好
Can someone explain me why Chrome Mobile have this issue, while the others don't?
有人能解释一下为什么 Chrome Mobile 有这个问题，而其他人没有吗？
My position:fixed div looks something like this:
我的位置：固定 div 看起来像这样：
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.
*删除了链接，因为它是客户的网站。解决方案在下面的答案中。
回答by Lucas Bustamante
I found out.
我发现。
For some god forsaken reason, my beloved Google Chrome on mobile require minimum-scale=1on the viewport meta.
由于某些被上帝遗弃的原因，我心爱的移动版 Google Chrome 在视口元数据上要求minimum-scale=1。
<meta name="viewport" content="minimum-scale=1">
It works now.
它现在有效。
回答by vAhy_The
The problem is with meta tagyou must put there
问题是meta tag你必须把它放在那里
<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 Chromebrowser change heightof viewport.
这是因为Chrome浏览器更改height了viewport.
回答by Travis Fleenor
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.
这对我有用，至少在早期版本的 chrome 桌面中，当修复行为不正常时。请注意，相对定位元素不会像固定元素那样忽略粘性定位元素。
Not sure if this will help but it's the answer I was searching for when I got to this question.
不确定这是否会有所帮助，但这是我遇到这个问题时正在寻找的答案。
回答by rémy
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.
这会帮助你，我的朋友 :D 当也使用 z-index 时，确保它总是被应用，假设 z-index 没有应用非粘性。
回答by glucka
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.
您的某些元素会超出视口，因此 Android Chrome 会自动缩放视口。减少像视口一样大的元素。
