css - 在最新的 Android Chrome (85) 上滚动时，粘性元素消失/闪烁

Question

我有一个包含带有以下 CSS 的 header 元素的网站:

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

在 Android 上最新的 Chrome 中，这个元素似乎会在用户每次滚动时消失。当滚动 Action 完成时，它会重新出现，这使得它看起来像元素在滚动页面时闪烁。当我在桌面 Chrome 中模拟 Nexus 5X 时，同样的事情发生了，但只有当我使用触摸输入滚动时才会发生。当我使用滚轮时，标题元素始终保持可见。它似乎也没有出现在旧版本中，它在桌面 Chrome 和其他浏览器上也能正常工作。

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

Answer 1

当使用 position: sticky 时，我在 Android 版 Chrome (v85.0.4183.81) 中看到了同样的问题。它似乎只发生在内容比视口(viewport)宽并且被视口(viewport)元标记缩小以适合它时。

我在 CodePen 上创建了一个最小的重现，但它需要全屏运行，所以只会在没有 iframe 的情况下运行的 CodePen Debug模式下显示问题:https://codepen.io/mavman/pen/ZEWxoab

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

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

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