滚动时 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 解决了这个问题。