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规则可能会有帮助。 在我的情况下，我添加了一个边界顶部的孩子切换。
