I am diagnosing performance issues with my website and I have noticed a specific issue with a CSS selector that slowly matches against many elements.

Use dev tools to analyse my site's performance, ":not(svg)" causes the biggest part of "Recalculate style". Searching dev tools "Sources", I cannot find this selector in my code.

It turns out it is a user agent stylesheet that applies to all children within my single svg element:

One thing I tried is making a specific stylesheet to apply this transform-origin to only the actual elements within my svg in the hopes :not(svg) would not be applied. This did not work:

g,
text,
path {
    transform-origin: 0px 0px;
}

This also did not help and caused my page to look bad, so transform-origin: 0px 0px is required on the child elements.

svg * {
    transform-origin: inherit;
}

Obviously, the number of <g> and other elements within my <svg> is part of the problem, but I think it would be a bigger change to try to change that (I'm using d3.js and the entire point of this website revolves around this svg and its elements within). Is there any way I can disable this user agent stylesheet selector, override it with something more specific/faster, or is there any other solution that would resolve the performance issue? Anything I've tried does not improve the performance, the original User agent selector still runs.