2

由于这个 CSS 规则，我有两个 DOM 元素存在于它们自己的复合层上：

.element-one, 
.element-two {
    will-change: transform;
    transform: translateZ(0); // Fallback
}

现在，我可以使用 Chrome 开发工具的显示图层边框选项检查这些图层。

都很棒！这就是我所看到的

在此处输入图像描述

我熟悉橙色边框颜色，这意味着元素存在于自己的复合层上。但是绿色代表什么？

所有开发工具文档似乎都已过时。

4

2 回答 2

7

Chromium 源debug_colors.cc详细说明了定义。

基本上有两种类型的东西启用了显示图层边框。

  1. 复合层获得视觉边框。它们通常是橙色和橄榄色的。但也可以是绿色、淡蓝色、黄色、蓝绿色、蓝色或紫色。
  2. GPU 瓦片的边缘标有边框。您通常可以忽略磁贴，因为它们是实现细节。通常它们是青色的，但您也可能会看到紫色、黄色、绿色、深灰色、灰色、红色或黄绿色瓷砖。
于 2016-02-22T20:24:39.707 回答