css - 显示合成图层边框(蓝色边框)

Question

我制作了简单的简化测试用例(JSBIN)来检查filter、opacity 和transform 是否在compositor thread 上运行 在制作动画时，它们是。如果您打开 Chrome Dev Tools 并使用功能显示复合层边框，您将看到第一个 div 周围有蓝色 边框，最后 2 个有 < strong>橙色边框。为什么这是错误或功能？我在 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);
}