我可以在Chrome中为"overflow:scroll"div执行"滚动重绘"警告

Question

在Chrome DevTools中,在"渲染"下,可以选择"显示潜在的滚动瓶颈".

当我启用此功能时,div我在屏幕上overflow:scroll显示的一些元素会在顶部显示一个标记"重新绘制滚动".

我找不到关于这个功能的很多文档,我不知道它是否可以实际修复或改进,或者只是一个事实陈述 - div有内容,而且确实滚动.

Answer 1

您可以在divwith overflow: scroll或overflow: auto创建滚动瓶颈上应用此CSS .

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

这将迫使浏览器创建一个新图层来绘制这个元素,有时修复滚动瓶颈(特别是使用Webkit).

Answer 2

尽管已接受的答案解决了这个问题,但值得查看CSS will-change属性.这是transform: translateZ(0);最近的优选.这篇文章解释了细节上的差异 - https://dev.opera.com/articles/css-will-change-property/

.scroll-container {
  will-change: transform;
}

Answer 3

这让我惊讶地花了很多时间来追踪发生的事情,而且只是因为我在 Chromium bugtracker问题514303的错误报告结尾处看到了一方评论.这是正在发生的事情以及如何解决它:

存在一种称为"LCD文本"的概念,我认为这意味着子像素抗锯齿,即"更清晰锐利的文本".不幸的是,此功能与合成器加速滚动互不兼容.

默认情况下(至少在Blink/Webkit上)启用LCD文本所有平台都不是高DPI(大多数普通显示器;即你可以检查console.log(devicePixelRatio)).另一方面,高DPI设备(想想Retina显示器,或大多数移动设备和平板电脑)默认情况下禁用LCD文本,因为在高DPI平台上并不需要"更清晰更清晰的文本"功能.

因此,对于合成器加速滚动,情况恰恰相反:只有在禁用LCD文本的高DPI平台上才能实现.

但是,您可以通过将overflow:scroll元素添加到其自己的层来强制在大多数监视器上强制进行合成器加速滚动,方法是添加will-change:transform到该元素,或者强制溢出元素成为其自身层的父级的任何hackish等效项(例如transform:translateZ(0)) .(请注意,正在删除供应商前缀.)

tl; dr:Chrome不假设子像素抗锯齿和gpu辅助滚动; 挑选一个或另一个.亚像素抗锯齿是Chrome上的默认选择(手机和视网膜显示器除外,因为它们的文字非常小,您不需要该功能,因此您不会在这些平台上发现此问题).通过强制元素进入自己的合成器层来覆盖它will-change:transform(但请注意,您的文本可能看起来不完美).