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

Question

我正面临这个看起来像 Chrome 移动版上的错误的奇怪问题。

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

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

向上滚动效果很好

向下滚动时，一块带有 position:fixed 的 div 消失在视口之外

我试图在小提琴上找出问题，但无法重现。所以我把整个网站封装在一个小提琴里，问题就停止了。我还是不明白为什么。

网站孤立无援：已删除*

实时网站：已删除*

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

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

有人能解释一下为什么 Chrome Mobile 有这个问题，而其他人没有吗？

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

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

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

原文由 Lucas Bustamante 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我发现。

出于某种被上帝遗弃的原因，我心爱的谷歌浏览器在移动设备上要求 minimum-scale=1 在视口元上。

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

现在可以了。

原文由 Lucas Bustamante 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 的 viewport 。

原文由 vAhy_The 发布，翻译遵循 CC BY-SA 4.0 许可协议