我可以对 Chrome 中“溢出：滚动”div 的“滚动重绘”警告做些什么吗

Question

在 Chrome DevTools 的“渲染”下，有一个选项“显示潜在的滚动瓶颈”。

当我启用此功能时，屏幕上带有

div

的一些

overflow:scroll

元素会在顶部显示一个标志，上面写着“在滚动时重新绘制。”

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

Answer 1

您可以将此 CSS 应用于

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 问题 514303。以下是发生的情况以及解决方法：

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

在所有非高 DPI 的平台（大多数普通显示器；即您可以检查

console.log(devicePixelRatio)

）上，默认启用 LCD 文本（至少在 Blink/Webkit 上？）。另一方面，在高 DPI 设备（例如 Retina 显示屏或大多数移动设备和平板电脑）上，LCD 文本默认处于禁用状态，因为在高 DPI 平台上您并不真正需要“更清晰的文本”功能。

因此，合成器加速滚动的情况正好相反：只有在禁用 LCD 文本的高 DPI 平台上才可能实现。

但是，您可以通过将

overflow:scroll

元素提升到其自己的层，通过将

will-change:transform

添加到该元素，或任何黑客等效的方式强制在大多数显示器上进行合成器加速滚动，这将强制溢出元素成为它自己的层（例如

transform:translateZ(0)

）。 （请注意，供应商前缀正在被删除。）

tl;dr：Chrome 不支持子像素抗锯齿和 GPU 辅助滚动；选择其中之一。子像素抗锯齿是 Chrome 上的默认选项（手机和视网膜显示屏除外，因为它们的文本太小，您不需要该功能，因此您不会在这些平台上注意到此问题）。通过使用

will-change:transform

强制元素进入其自己的合成器图层来覆盖此设置（但请注意，您的文本可能看起来并不完美）。

Answer 4

我在输入文本类型时遇到了相同的“滚动重绘”问题。通过删除输入的“占位符”属性，警告消失了。

Answer 5

不，你不能修改它，这是 Chrome 的一个功能，可以让你知道窗口中每次更新绘制了什么。

更新可以是很多不同的东西（滚动、鼠标移动、间隔、请求动画帧……）。

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

如果（我不知道），浏览器总是重新绘制一个

div

，如果它设置为溢出滚动，你也许可以做一些JS在屏幕外时设置为

overflow hidden

...

这篇文章谈论不同的浏览器布局