css - 固定元素在 Chrome 中消失

Question

在我构建的网站上滚动时，使用 CSS 属性 position: fixed 可以正常工作，将导航栏保留在页面的最顶部。

但是，在 Chrome 中，如果您使用导航栏中的链接，它有时会消失。通常，您单击的元素仍然可见，但并非总是如此。有时整个事情都消失了。四处移动鼠标可以返回部分元素，使用滚轮或箭头键滚动只需单击一下即可返回元素。您可以在 https://nikeplusphp.charanj.it 上(间歇性地)看到它发生- 您可能需要点击一些导航链接几次才能看到它发生。

我也尝试过使用 z-index 和可见性/显示类型，但没有成功。

我遇到了 this question但修复对我根本不起作用。似乎是 webkit 问题，因为 IE 和 Firefox 工作正常。

这是一个已知问题还是有修复方法来保持固定元素可见？

更新:

仅影响具有 top: 0; 的元素，我尝试了 bottom: 0; 并且按预期工作。

Answer 1

将 -webkit-transform: translateZ(0) 添加到 position: fixed 元素。这迫使 Chrome 使用硬件加速来持续绘制固定元素并避免这种奇怪的行为。

我为此 https://bugs.chromium.org/p/chromium/issues/detail?id=288747 创建了一个 Chrome 错误.请给它加注星标，以便引起注意。