ARTICLE AD BOX
Imagine the following css-rule, I used in my stylesheet:
.toplevel .small-container svg:has(> g[opacity="0.3"]) { > g[opacity="0.3"], + .sibling-el { opacity: .6 !important; } }When using the above rule, performance in dynamic content completely tanked. While a performance penalty from :has is always to be expected, this even happens without elements with the .small-container-class in the DOM. It seems like the :has() is evaluated, even tho evaluation should have ended, when no .small-container was found.
Rewriting it as
.toplevel { .small-container svg:has(> g[opacity="0.3"]) + .sibling-el, .small-container svg > g[opacity="0.3"] { opacity: .6 !important; } }resolves the performance issues completely.
I'm curious why that is... Do you think it's an issue with the browser, that doesn't properly combine the selectors? Or am I just missing something about the way &-nesting works?
