Chrome重绘问题

Question

我在Chrome中遇到了奇怪的重绘问题：

看到右侧破损了吗？这是一个只有单个背景的

。

HTML

<div id="resultsSortFilter>
  <!-- ... -->
</div>

CSS（层叠样式表）

#resultsSortFilter {
    float: left;
    width: 712px;
    height: 109px;
    margin: 7px 0 0 8px;
    background: url('../images/search_sortfilter_bg.png') no-repeat;
}

• 其他浏览器没有问题
• 只发生在更新的版本上，我们阻止了更新以防止这在内部引起问题。
• 似乎是在渲染完成之前上下滚动时触发。
• 多个站点上都有相同的问题。

有其他人看到这个问题吗？有人知道是什么原因引起的或者Chrome打算怎么做吗？

Chrome版本26.0.1410.64 m

更新

该问题出现在Windows和Mac OS上。实际上，在Mac上看起来更糟糕。

我可能已经进一步锁定了它。我们在一个包含大量大型图像的页面上遇到了错误。我想知道这是否与Chrome需要下载的数据大小有关？

这似乎可以解决此问题（不会称其为修复）：

"可能是Chrome的新版本根本不喜欢您的GPU。我遇到过类似于您的问题，并通过关闭合成和3D加速功能来解决它们。

在地址栏中键入 chrome://flags并设置以下项目：

• 所有页面上的GPU合成：禁用（下拉列表中的三个选项。）
• 禁用加速的2D画布：启用（单击“启用”的链接，框将变白。）
• 禁用加速的CSS动画：启用（与上面一样，项目将变白。）
• 然后点击 页面底部显示的按钮重新启动chrome并测试是否有效。"

来自https://askubuntu.com/questions/167140/google-chrome-with-strange-behavior

更新

在Chrome的后续版本中，该问题似乎已经消失了。

- Liam

---

如果没有可运行的示例，我们实际上无法进行调试或分析。 - Niels Keurentjes

当您在隐身模式下运行网站时会发生什么？ - Ron van der Heijden

嗯，你能分享一个链接给我们吗？😀 或者在 Fiddle 上创建类似的东西？ - Ron van der Heijden

你好。我也是一名网页开发者，最近几周在Chrome上遇到了多个重绘问题。在很多情况下，在元素中切换 display: none/block 时就会出现这种情况，所以我找到的解决办法就是使用 clip 属性。但在许多其他情况下，我无法找到解决方案... :( - Áxel Costas Pena

是的，Chrome每天都变得更加有bug了。 - Timo Huovinen

Answer 1

Chrome 变得越来越出现 bug。值得尝试的是在元素上强制启用 GPU 硬件加速。

将以下内容添加到 CSS 中以强制启用硬件加速：

```css transform: translate3d(0, 0, 0); ```

-webkit-transform: translate3d(0, 0, 0);

- Aaron

---

抱歉回复晚了。我花了一些时间再次研究这个问题。我不确定是否解决了这个问题。但有一件事情是，它打破了我所有的Jquery UI模态弹出框？！这也适用于@hoffmann建议的修复方法。 - Liam

这个方法解决了我的重绘问题。这个也可以： -webkit-transform: scale3d(1,1,1); https://dev59.com/9Wgu5IYBdhLWcg3w4665 - Lambart

如果在Z平面（3D）中进行转换，则闪烁似乎会自行解决。 - neaumusic

谢谢您，它帮助避免了一个奇怪的缩放效果，只出现在Chrome上，而不是Safari上。 - Markus Zeller

Answer 2

我在 Webkit 浏览器中遇到了这个问题，不仅是在 Chrome 中。 我通过在我的 CSS 中添加以下规则来解决它：

html *:not(svg) {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0); /*only in IE10*/
}

如果支持的话，这将对除了 Firefox/IE/Safari/Chrome 上的 SVG 之外的所有元素应用硬件加速。

我不对 SVG 标签应用转换，因为由于某些原因，这会导致我的 SVG 渲染出现问题，但奇怪的是，将其应用于标签内部的矩形等元素却没有问题。

因此，请尝试将此规则添加到您的 CSS 中，看看是否解决了问题。

- Hoffmann

---

请注意，这可能会导致内存较小的移动浏览器崩溃。 - opyh

这会将所有内容转换为“复合层”。如果您使用性能工具，您会看到它会减慢您的浏览器速度。 - Ryan Taylor

我需要在元素及其子元素上设置它，但不是所有的元素。使用Chrome中的“绘制闪烁”工具来查看哪些元素需要“合成层”。 - Dan Froberg

Answer 3

当使用display: none;display:block;进行切换时，我遇到了这类问题。

例如，使用jQuery.toggle()时。

所涉及的元素仅是我想要显示和隐藏的内容的包装器。因此，它的父元素会垂直地扩展或缩小。它看起来像这样：

<div class="parent">
    <div class="child-to-toggle">
    </div>
</div>

child-to-toggle没有任何样式规则，当它被隐藏时，父元素的一部分不能正确地重绘。（底部部分）

然后，我为child-to-toggle添加了一个CSS规则，问题得到解决。看起来在这种情况下添加CSS规则将强制进行一些重绘。

尽管已经有一个被接受的答案，但我还是添加了这个答案，因为在我的电脑上，Macbook pro，OSX Maverick，Chrome 36上启用硬件加速会完全破坏UI，出现伪影，所以我不得不寻找另一种方法。

添加一个CSS规则可能会有所帮助。在我的情况下，我向child-to-toggle添加了一个border-top。

- Kev

---

在邮递员用户界面的情况下，重绘问题并不是在我们切换或以任何方式操作DOM时出现的。它发生在元素内部的内容由于用户交互而扩展或收缩时。对于这个问题，我们几乎无法控制触发与CSS相关的更改。 - Shamasis Bhattacharya