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

Question

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

更新
我注意到每次固定元素在向上滚动时传递新的<section>...</section>时都会出现渲染问题。 Chrome似乎存在与HTML <section>...</section>或<nav>...</nav>等HTML5标记相关的一些问题。将这些更改为<div>...</div>可以解决渲染问题，无论如何我仍然希望继续使用HTML5标记。

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

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

Answer 1

固定元素内不透明度为0的元素的问题原因。将这些设置为display: none解决了问题。

Answer 2

特别针对Chrome最新浏览器版本（55.0.2883.87米（64位）） 我添加了：

-webkit-transform: translateZ(0);