由于以下CSS规则，我有两个DOM元素存在于它们自己的复合层中：
.element-one,
.element-two {
will-change: transform;
transform: translateZ(0); // Fallback
}现在，我可以使用Chrome开发工具的显示层边界选项检查这些层。
太棒了！这就是我看到的
我很熟悉橙子的边框颜色，它意味着元素存在于它自己的复合层上。但是绿色表示什么呢？
所有的开发工具文档似乎都过时了。
由于以下CSS规则，我有两个DOM元素存在于它们自己的复合层中：
.element-one,
.element-two {
will-change: transform;
transform: translateZ(0); // Fallback
}现在，我可以使用Chrome开发工具的显示层边界选项检查这些层。
太棒了！这就是我看到的
我很熟悉橙子的边框颜色，它意味着元素存在于它自己的复合层上。但是绿色表示什么呢？
所有的开发工具文档似乎都过时了。
2条答案
按热度按时间tkqqtvp11#
chrome 源的
debug_colors.cc详细说明了定义。基本上有两种类型的东西启用显示层边界是打开的。
1.合成图层有一个视觉边界。它们通常是橙子和橄榄色。但也可以是绿色、浅蓝色、黄色、蓝绿色、蓝色或紫色。
a1o7rhls2#
在源代码中找到了答案
https://code.google.com/p/chromium/codesearch#chromium/src/cc/debug/debug_colors.cc&q=debug%20borders&sq=package:chromium
通孔
http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome#TOC-Appendix-E:-Debugging-composited-layers