滚动时 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

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