禁用SVG的chrome用户代理样式表*选择器？

Question

我最近注意到Chrome将以下CSS规则应用于所有SVG元素（无论它们如何嵌入[object，embed，iframe或inline]）：

* {
  -webkit-transform-origin-x: 0px;
  -webkit-transform-origin-y: 0px;
  -webkit-transform-origin-z: initial;
}

运行CSS选择器分析器，*选择器是迄今为止最大的性能影响。这似乎会导致滚动等在页面中使用几个非常复杂的SVG感到迟钝。

我的问题是：我怎么能绕过这个？有没有办法删除这个规则（不覆盖，因为在这种情况下会导致选择器性能更糟）？

也许这是Chrome团队的监督，或者也许是因为我不理解的原因（对任何能解释为什么它在那里以及如果我错了的人的奖励积分）希望它消失了。）

也许我正在错误地阅读探查器。这是一个截图（删除了无关的选择器）。

我知道我在这里提出了很多问题，但是有没有理由（除了它还没有实施）为什么没有填充“来源”栏？

Answer 1

未填充Source列，因为配置文件中列出的特定规则没有源文件。这是因为驻留在用户代理样式表中的规则在Chrome代码中被“硬编码”，并且与实际资源不对应。

现在，尝试切换到绝对时间（配置文件视图下方状态栏中的%按钮），并查看它实际需要多少时间（以毫秒为单位）。我敢打赌，除非您将HTML5规范视为单页，否则您会感到惊讶。

据我所知，-webkit-transform-origin以这种方式用于强制整个页面的硬件加速合成。

Answer 2

您可以仅使用命名空间将规则限制为HTML，至少在XHTML中（不确定“普通”HTML）：

@namespace html 'http://www.w3.org/1999/xhtml'
html|* {
  -webkit-transform-origin-x: 0px;
  -webkit-transform-origin-y: 0px;
  -webkit-transform-origin-z: initial;
}

（比较Tinkerbin上的另一个例子）。

对于“普通”HTML，使用带有SVG名称空间的not()选择器应该可以工作：

@namespace svg 'http://www.w3.org/2000/svg';
*:not(svg|*) {
  -webkit-transform-origin-x: 0px;
  -webkit-transform-origin-y: 0px;
  -webkit-transform-origin-z: initial;
}

但是，我不确定这是否会提高性能。