Question

在Chrome DevTools中，在“渲染”下，可以选择“显示潜在的滚动瓶颈”。

当我启用此功能时，我在屏幕上显示的div元素overflow:scroll会在顶部显示一个标记，表示“在滚动时重新绘制。”

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

Answer 1

您可以在div上使用overflow: scroll或overflow: auto来创建滚动瓶颈。

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 Issue 514303的错误报告结尾处看到了一方评论。以下是发生了什么以及如何解决问题：

存在一个名为＆＃34; LCD text＆＃34;的概念，我认为这意味着亚像素抗锯齿，即＆＃34;更清晰的文本＆＃34;。不幸的是，此功能与合成器加速滚动互不兼容。

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

因此，对于合成器加速滚动而言恰恰相反：只有在禁用LCD文本的高DPI平台上才能实现。

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

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

Answer 4

不，你不能修改它，它是一个Chrome功能，让你知道，在窗口中绘制了每个更新的内容。

更新可以有很多不同的东西（滚动，鼠标移动，间隔，请求抽象框架......）。

但是，现在您知道了，您可以增强您的代码。

如果（我不知道），浏览器总是重新绘制div，如果设置为溢出滚动，你可以在屏幕外做一些JS设置为overflow hidden ...

This post谈论不同的浏览器布局

我可以做什么关于＆＃34;重新制作滚动＆＃34; Chrome中的警告＆＃34;溢出：滚动＆＃34; DIV

4 个答案: