Question

我有一个网站，其中包含带有以下CSS的标头元素：

position: sticky;
top: 0px;
left: 0px;
right: 0px;
z-index: 3;

在最新的Android版Chrome浏览器中，此元素似乎在用户每次滚动时都会消失。滚动运动完成后，它会重新出现，这使元素看起来像在滚动浏览页面时闪烁。当我在台式机Chrome浏览器中模拟Nexus 5X时，会发生同样的事情，但仅当我使用触摸输入进行滚动时。当我使用滚轮时，标题元素始终保持可见。在较旧的版本中似乎也没有出现这种情况，并且在桌面Chrome和其他浏览器上也可以正常工作。

最近关于Chrome在滚动时如何处理position: sticky的方式发生了什么变化？有办法避免这种行为吗？

Answer 1

使用position: sticky时，我在Android上的Chrome（v85.0.4183.81）中看到了相同的问题。仅当内容的宽度大于视口并被视口meta标签缩小以适合它时，才会出现这种情况。

我已经在CodePen上创建了一个最小的repro，但是它需要全屏运行，因此只会在CodePen的调试模式下显示问题，该调试模式无需iframe：https://codepen.io/mavman/pen/ZEWxoab

将minimum-scale=1添加到视口元标记似乎可以解决此问题：

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

这不是我的选择，因为我需要一些内容才能将其缩小到视口的大小，因此我仍在寻找更好的解决方案。

Answer 2

相同的问题，您可以使用桌面Chrome的devtool和带有以下功能的Galaxy S5视图来重现它：

<html>
<head>
    <meta id="viewport" name=viewport content="width=320">
</head>

<body>

<div style="position: sticky; height:40px; top: 0px; background-color: #ff0000;">
    <p>Test</p>
</div>

<div style="height: 10000px;"></div>

</body>
</html>

在最新的Android Chrome浏览器上滚动时，粘滞元素消失/闪烁（85）

2 个答案: