我遇到了一个奇怪的问题,在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;
}
*因为这是客户的网站,所以已经移除了链接。解决方案在下面的答案中。
position:sticky
对我也起作用了(没有这个)。 - qodeninja<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>
,因此我只是在 create react app 的默认设置中添加了minimum-scale=1
。 - Diego H. O'Hagan