显示合成图层边框（蓝色边框）

Question

我制作了简单的简化测试用例 (JSBIN) 来检查 filter、opacity 和 transform 在制作动画时是否在 compositor thread 上运行，它们是。如果您打开 Chrome 开发工具 并使用功能显示合成图层边框，您会看到第一个 div 周围有 蓝色 边框，最后 2 个有 橙色边框。为什么这是错误或功能？我在 Ubuntu 上，所以你们也能在其他平台上看到这种行为吗？

Answer 1

我找到了答案。在这里Debugging-composited-layers

您还可以看到here Chromium 根据某些条件使用不同的颜色。

代码的注释很好，例如，如果图像是合成的，则它们应该具有olive 颜色。我在JSBIN 上进行了测试，如果您打开 --show-compisited-layer-borders，图像会有橄榄色边框。

这里是代码片段和注释。

// Image layers are olive.
SkColor DebugColors::ImageLayerBorderColor() {
  return SkColorSetARGB(128, 128, 128, 0);
}
int DebugColors::ImageLayerBorderWidth(const LayerTreeImpl* tree_impl) {
  return Scale(2, tree_impl);
}