Chrome 重绘问题

Question

我在 chrome 中遇到了一个奇怪的重绘问题：

看到损坏的右侧了吗？这是一个div，具有单一背景img。

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 中消失了。

Answer 1

我在切换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 中添加了一个边框顶部。

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*/
}

这将对所有元素应用硬件加速，FF/IE/Safari/Chrome 上的 svg 除外（如果支持）。

我没有在 SVG 标签上应用转换，因为由于某种原因，这导致我的 svg 无法正确呈现，奇怪的是，将它应用到标签本身内的 rect 等元素不会导致任何问题。

所以尝试将此规则添加到您的 css 中，看看它是否能解决您的问题。

Answer 3

Chrome 越来越麻烦。值得尝试的是在元素上强制 gpu 硬件加速。

将此添加到 CSS 以强制硬件加速：

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