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

Posted 2023-03-05

【中文标题】Chrome 在低 DPI 和高 DPI 显示器上以不同方式重绘 div

【英文标题】：Chrome repaints div on scroll differently on low- and high-DPI displays

【发布时间】：2014-01-07 10:23:46

【问题描述】：

我正在努力优化我的网络应用中的滚动性能，并在最新的 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 中实现这种性能？

【参考方案1】：

我在邮递员团队的一篇博文中找到了对此的解释。他们使用上面列出的相同解决方案，但解释了它发生的原因。尝试下面的 sn-p 应该可以为您修复它。

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

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

【讨论】：

虽然这可能会回答问题，但it would be preferable 在此处包含答案的基本部分，并提供链接以供参考。

【参考方案2】：

我没有 Retina 显示屏电脑来测试这个。我猜你可以试试 .container 上的“translateZ hack”？

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

不确定这是否可行。但在某些情况下，它可以通过将该元素分离到它自己的“层”中来帮助解决浏览器重绘问题。

希望这会有所帮助！

【讨论】：

我在 Chrome 50 上遇到了同样的情况。我添加了 transform 属性，但它似乎仍然重新绘制了整个区域。它对你有用吗？