位置固定在镀铬手机上，导致元素向上/向下滚动 [英] Position fixed on chrome mobile causing element to move on scroll up/down

问题描述

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

向上滚动工作正常

< > b
$ b

在向下滚动时，位置固定的div块消失在视口外

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

网站被隔离在一个小提琴中：
已移除*

现场网站：
已移除*

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

• Chrome移动版：错误


• Chrome桌面版：正常工作
$ $ b
• Firefox移动版：正常工作 / ul>
  
  

  有人可以解释为什么Chrome Mobile有这个问题，而其他人不会？

  
  
  

  我的位置：固定div看起来像这样：

    div {
   position：fixed; 
   top：10px; 
  剩下：0; 
  宽度：100％; 
   text-align：right; 
  } 
    

  *删除了链接，因为它是客户的网站。
  

  解决方案

  我发现了。

  
  
  <对于一些上帝遗弃的理由，我心爱的移动谷歌浏览器在视口元上需要 user-scalable = no 。
  
  

   < meta name =viewportcontent =width = device-width，initial-scale = 1，minimum-scale = 1.0，user-scalable = no> 
    

  现在可以使用。

  
  

  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.

  解决方案

  I found out.

  For some god forsaken reason, my beloved Google Chrome on mobile require user-scalable=no on the viewport meta.

  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
  

  It works now.

  这篇关于位置固定在镀铬手机上，导致元素向上/向下滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！