固定在chrome mobile上的位置导致元素向上/向下滚动

Question

我正面临这个奇怪的问题，看起来像Chrome手机上的一个错误。

我有一个位置的div：fixed;对齐到屏幕的右上角。在桌面上，它在移动设备上工作正常（它保持原位），然而，当我向上或向下滚动时，div正在移动。我制作了一个视频来更好地解释它：

https://www.youtube.com/watch?v=gCgN6ULkcMg

在向上滚动时效果正常

向下滚动时，位于视口外的一块div已固定消失

我试图在小提琴上隔离问题，但无法重现它。因此，我将整个网站封装在一个小提琴中，问题就此停止了。我仍然不明白为什么。

小提琴中的网站： 除去*

直播网站： 除去*

此外，我在现场网站上对不同的设备进行了一些测试：

• Chrome移动版：错误
• Chrome桌面：正常工作
• Firefox mobile：正常工作
• Safari mobile：正常工作

有人可以解释一下为什么Chrome Mobile会出现此问题，而其他人则没有？

我的立场：固定div看起来像这样：

div {
  position:fixed;
  top:10px;
  left:0;
  width:100%;
  text-align:right;
}

*删除了链接，因为它是客户的网站。解决方案在下面的答案中。

Answer 1

我发现了。

出于上帝遗弃的原因，我心爱的谷歌浏览器在移动设备上需要 minimum-scale = 1 。

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

现在有效。

Answer 2

问题出在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">

这是因为 Chrome 浏览器将height的{​​{1}}更改了。

Answer 3

如果您希望元素启动并停留在页面顶部，请尝试使用

    #header {
          position: sticky;
          top: 0;
    }

这对我来说很有用，至少在早期版本的Chrome桌面上，修复时表现不佳。请注意，相对定位的元素不会忽略粘贴的元素，就像它们固定的一样。

不确定这是否会有所帮助，但是当我得到这个问题时，我正在寻找答案。

Answer 4

最好检查一下视口中是否挂有东西，可能不需要调整视口元标记。

如果该棘手的东西仍然在晃动，或者只是让浏览器有更多的呼吸时间，请考虑添加

transform: translate3d(0, 0, 0);

这对您有帮助，我的朋友：D 同样在使用z-index时，请确保始终应用它，并假设z-index并非非粘性地应用。

Answer 5

就我而言，原因是缺少以下 CSS：

img {
    max-width: 100%;
}

当我添加这个 CSS 时，一切顺利

Answer 6

您的某些元素会离开视口，因此Android Chrome会自动缩放视口。减少像视口一样大的元素。