Chrome重绘问题

我在Chrome中遇到了一个奇怪的重绘问题:

截图

看到破碎的右侧? 这是一个具有单个背景的div

HTML

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

CSS

 #resultsSortFilter { float: left; width: 712px; height: 109px; margin: 7px 0 0 8px; background: url('..http://img.dovov.comsearch_sortfilter_bg.png') no-repeat; } 
  • 在任何其他浏览器没有问题
  • 只发生在新版本,我们阻止了更新,以防止这种内部导致的问题。
  • 似乎是在渲染完成之前通过上下滚动触发的。
  • 同一问题在多个网站上

有没有人看过这个? 有谁知道是什么原因造成的,或者Chrome想要做什么?

Chrome版本26.0.1410.64 m

更新

这个问题在Windows和Mac OS上。 事实上在Mac上似乎更糟糕。

我可能会把它进一步固定下来。 我们在包含大量大图像的页面上看到错误。 我想知道这是否与Chrome浏览器必须下载的数据大小有关?

这似乎使问题消失(不打算称之为修复):

“这可能是因为更新版本的Chrome根本不喜欢你的GPU,我遇到了类似于你的问题,并通过closures合成和3D加速function解决了这个问题。

在地址栏中inputchrome://标志并设置以下项目:

  • 所有页面上的GPU合成:已禁用(下拉菜单中有三个选项)。
  • 禁用加速2Dcanvas:启用(点击“启用”链接,该框将变成白色。)
  • 禁用加速CSSanimation:启用(如上所述,该项目将变成白色。)
  • 然后点击页面底部显示的button立即重新启动以重新启动浏览器并testing它是否工作。

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

更新

这个问题似乎已经消失在更高版本的Chrome中。

Chrome越来越笨重。 值得一试的是迫使元件上的硬件加速。

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

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

我在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不能正确渲染,奇怪地将这个应用到象标签里面的矩形本身没有问题。

所以尝试添加这个规则到你的CSS,看看它是否能解决你的问题。

切换display:none;时,我遇到过这样的问题display:none; display:block;

例如jQuery.toggle()

有问题的元素只是我想展示和隐藏的内容的包装。 所以这是它的父母,它会纵向扩大或缩小。 它看起来像这样:

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

孩子切换没有造型规则,并且当隐藏时,父母的一部分不能正确重绘。 (底部)

然后,我添加了一个CSS规则,以切换子,并解决了问题。 看起来像添加CSS规则将强制在这种情况下重绘。

尽pipe我接受了这个答案,但是我添加了这个,因为在我的计算机,Macbook pro,OSX Maverick,Chrome 36上启用硬件加速会完全搞乱用户界面,所以我不得不寻找其他方法。

添加一个CSS规则可能会有帮助。 在我的情况下,我添加了一个边界顶部的孩子切换。