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

Chrome越来越响亮.值得尝试的是强制元素上的GPU硬件加速.

将其添加到CSS以强制硬件加速:

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

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上的svgs之外的所有元素的硬件加速(如果支持).

我不对SVG标签应用转换,因为由于某种原因,这导致我的svgs无法正确呈现,奇怪地将其应用于像标签内部的rect这样的元素本身不会导致任何问题.

因此,请尝试将此规则添加到您的CSS中,看看它是否能解决您的问题.