最新版的Android Chrome（85）中滚动时，固定元素会消失/闪烁。

3

我有一个包含以下CSS的标题元素的网站:

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

在最新的安卓Chrome中，每次用户滚动页面时，该元素似乎都会消失。当滚动运动完成时，它会重新出现，这使得整个滚动过程中，该元素会一闪一闪的。当我在桌面版Chrome中模拟Nexus 5X时，同样的事情也发生了，但只有在使用触摸输入滚动时才会出现。使用滚轮滚动时，标题元素始终可见。此外，它似乎并没有在旧版本中出现，并且在桌面Chrome和其他浏览器上也能正常工作。

Chrome在滚动时，处理"position: sticky"是否有最近发生过更改？是否有方法可以避免此行为？

- Nils

有一个最小化的演示可以展示这个问题吗？ - Zach Saucier

我有一个类似的问题。对我来说，它似乎与position: sticky;无关，而是与被转换到新位置的元素有关（不是在滚动时，而是在页面加载时）。我没有我的示例现场，但在另一个站点上也遇到了同样的问题：https://hanstholm.com/ - 我没有制作这个站点，但只是注意到在Chrome中向上和向下滚动时图像闪烁。这些图像就像我遇到的那些元素一样被转换。 - Rene Poulsen

2个回答

0

同样的问题，您可以使用桌面版Chrome的开发工具和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>

- David Hansmann

今天早上的新更新似乎解决了这个问题！ - David Hansmann

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mavman · Accepted Answer

我在Android的Chrome（版本号为v85.0.4183.81）中使用position: sticky时遇到了同样的问题。只有当内容宽度大于视口并通过视口meta标签缩小以适应视口时，才会出现此问题。

我在CodePen上创建了一个最小化的重现示例，但需要全屏运行，因此只会在CodePen的调试模式下显示问题而不带iframe：https://codepen.io/mavman/pen/ZEWxoab 将minimum-scale=1添加到viewport meta标记中似乎可以解决这个问题：

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

对我来说这不是一个选项，因为我需要一些内容能够缩小到视口的大小，所以我仍在寻找更好的解决方案。