css - 滚动时CSS位置修复了chrome中的奇怪渲染

Question

我有一个固定在屏幕顶部的元素，z-index 为 100。当我在 Chrome 中向上滚动页面时（OS X 上的 V.21.0.1180.82 和 Windows 上的 V.21.0.1180.83 m）我注意到一个看起来像这样的渲染问题：

更新：
我注意到每次当固定元素<section>...</section>在向上滚动过程中传递一个新元素时，都会出现渲染问题。Chrome 似乎有一些与 HTML5 标签相关的问题，例如<section>...</section>或<nav>...</nav>. 更改这些以<div>...</div>解决渲染问题，无论如何我仍然想继续使用 HTML5 标签。

有人知道解决这个问题的“黑客”吗？

在那之前，我将尝试创建一个可重现的代码示例并将错误提交给chromium。

Answer 1

The cause of the issue where elements with an opacity of 0 inside the fixed element. Setting those to display: none solved the problem.

Answer 2

特别是对于 Chrome 最新浏览器版本（55.0.2883.87 m（64 位）），我添加了：

-webkit-transform: translateZ(0);