35

我在 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 打算怎么做吗？

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

4

3 回答 3

40

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

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

-webkit-transform: translate3d(0, 0, 0);
于 2013-05-10T02:18:24.077 回答
10

我在 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 中，看看它是否能解决您的问题。

于 2013-05-15T14:33:07.200 回答
4

我在切换时遇到了这种问题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 中添加了一个边框顶部。

于 2014-07-23T11:36:54.877 回答