Chrome在低DPI和高DPI显示屏上以不同方式重新绘制div

Question

我正在努力优化我的网络应用中的滚动效果，并在最新的Chrome（v31）上遇到了有趣的行为，这也是Chrome Canary（v34）上的重复版。

在这个简化的例子中，我有一个简单的可滚动div：

<style>
    .container { 
        width: 200px;
        height: 200px;
        overflow: auto;
        background: #ccc;
    }
    .container div {
        height: 80px;
        width: 80px;
        background: #555;
        border-radius: 10px;
    }
</style>
<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

我启用了以下Chrome开发设置来调查滚动性效果

• “显示绘画矩形”（用红色矩形轮廓表示）
• “显示潜在的滚动瓶颈”

当我在非视网膜显示器上加载网页时，它会在每个滚动条上重新绘制整个容器div，Chrome甚至会指示：

但是当我将窗口移动到我的视网膜显示器并刷新页面时，滚动性能会提高！它只重新绘制滚动条本身（有时也是以前不在滚动视口中的内容）：

高DPI行为似乎更可取，滚动速度更快。无论DPI如何，有没有办法在Chrome中实现这种性能？

Answer 1

我没有Retina显示计算机来测试它。我猜你可以在.container上尝试“translateZ hack”吗？

.container { -webkit-transform: translateZ(0); }

不确定这是否有效。但在某些情况下，它可以通过将元素分成它自己的“层”来帮助修复浏览器重绘。

希望这有帮助！

Answer 2

我在邮递员团队的博客文章中找到了解释。他们使用上面列出的相同解决方案但解释了为什么会发生这种情尝试下面的代码片段应该为您修复它。

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

http://blog.getpostman.com/2015/01/23/ui-repaint-issue-on-chrome/