在Chrome移动端中使用固定定位会导致元素在向上/向下滚动时移动。

Question

我遇到了一个奇怪的问题，在Chrome移动版上看起来像是一个bug。

我有一个div，它的position:fixed属性使其对齐到屏幕的右上角。在桌面上，它工作得很好（保持不动），但在移动设备上，当我向上或向下滚动时，该div会移动。我录制了一个视频以更好地解释这个问题：

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

向上滚动正常

向下滚动时，具有position:fixed的div的一部分消失在视口外

我尝试在jsfiddle中分离问题，但无法重现。因此，我将整个网站封装在了jsfiddle中，问题就不再发生了。我仍然没有理解为什么。

在jsfiddle中封装的网站：

已删除*

现场网站：

已删除*

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

• Chrome移动版：有问题
• Chrome桌面版：正常工作
• Firefox移动版：正常工作
• Safari移动版：正常工作

有人可以解释一下为什么Chrome移动版会出现这个问题，而其他浏览器则没有吗？

我的position:fixed的div看起来像这样：

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

*因为这是客户的网站，所以已经移除了链接。解决方案在下面的答案中。

- Lucas Bustamante

Answer 1

因为某些原因，我的移动设备上的Google Chrome浏览器需要在视口的<meta/>中加入minimum-scale=1。

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

- Lucas Bustamante

---

这个有效，而且 position：sticky 对我也起作用了（没有这个）。 - qodeninja

此外，就我的情况而言，似乎Chrome会调整比例以使某些水平方向上突出的元素可见。如果除此问题外还有意外的水平滚动条，那么这很可能是奇怪的垂直滚动的根本原因。 - Thomas

但是使用 minimum-scale=1 会导致网站失去响应式，那么如何解决呢？ - sqlchild

使用固定位置时出现了相同的问题。我将我的元标签更改为：<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>，因此我只是在 create react app 的默认设置中添加了 minimum-scale=1。 - Diego H. O'Hagan

2022年在Chrome移动版中，这对我不起作用。 - marko kraljevic

Answer 2

问题出在meta标签上，你必须在那里放置

<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浏览器改变了视口高度。

- vAhy_The

---

谢谢。我一直在费尽心思地尝试理解这个问题，搞了几个小时才弄明白。这个方法可行！ - Sasanka Panguluri

我只需要高度和宽度属性。 - carlin.scott

谢谢，我相信这应该是被接受的答案！ - Georges D

任何小于3的最大缩放值都无法满足无障碍要求。对我来说，只包括宽度、初始缩放和最小缩放就足以解决这个问题。 - adam0101

Answer 3

您的一些元素超出了视窗范围，因此Android Chrome自动缩放视窗。请缩小比视口更大的元素。

- glucka

---

回答问题时要详细描述。 - Surjeet Bhadauriya

根据这个答案，我在容器中使用了width: 100%和overflow: hidden。它起作用了。 - Renato Probst

Answer 4

如果您希望该元素始终置于页面顶部，请尝试使用。

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

那对我来说刚刚起作用了，至少在chrome桌面版的早期版本中是这样的，当fixed表现不恰当时。只需注意相对定位的元素不会像固定定位的元素那样忽略粘性定位的元素。不确定这是否有帮助，但这就是我搜索到这个问题时正在寻找的答案。

- Travis Fleenor

Answer 5

在我的情况下，原因是缺少以下CSS：

img {
    max-width: 100%;
}

当我添加了这个CSS之后，一切都顺利了。

- user2812532

---

这个方法能够运作的原因在 Surjeet Bhadauriya 先前的回复中已经写明。 - Renato Probst

Answer 6

检查一下是否有内容超出了视口，不一定需要调整视口的meta标签。

如果那个粘性元素仍然晃动不定，或者只是为了给浏览器更多的呼吸时间，考虑添加

transform: translate3d(0, 0, 0);

这会帮助你，我的朋友 :D 当使用z-index时，请确保始终应用它，假设z-index未应用于非粘性元素。

- rémy