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

【问题标题】：CSS position fixed strange rendering in chrome when scrolling滚动时CSS位置修复了chrome中的奇怪渲染
【发布时间】：2012-08-23 22:10:20
【问题描述】：

我有一个固定在屏幕顶部的元素，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 标签。

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

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

【问题讨论】：

你能设置一个jsFiddle吗？或者展示一个活生生的例子？
yaa actully..我也想要 jsFiddle 或现场示例
你用top:0px定位了吗？请添加更多信息...
@bažmegakapa 很多代码（不是我的），很难展示一个例子，我会看看我能做些什么来提供更多细节。
@Lego 很难说没有例子。没有在任何其他浏览器/操作系统组合上体验过？

标签： css html google-chrome css-position

【解决方案1】：

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

【讨论】：

到底是如何找到解决方案的。 :D 非常感谢。我处理了完全相同的问题，这解决了它。

【解决方案2】：

特别适用于 Chrome 最新浏览器版本（55.0.2883.87 m（64 位））我已添加：

-webkit-transform: translateZ(0);

【讨论】：