Сочетание &-nesting и :has псевдокласса приводит к снижению производительности. ⇐ CSS

[Anonymous]

Представьте себе следующее правило CSS, которое я использовал в своей таблице стилей:

Код: Выделить всё

.toplevel .small-container svg:has(> g[opacity="0.3"]) {
> g[opacity="0.3"],
+ .sibling-el {
opacity: .6 !important;
}
}

При использовании вышеуказанного правила производительность динамического контента полностью снижается. Хотя всегда следует ожидать снижения производительности из-за :has, это происходит даже без элементов с классом .small-container в DOM. Кажется, что :has() оценивается, хотя оценка должна была закончиться, когда .small-container не найден.
Переписываем его как

Код: Выделить всё

.toplevel {
.small-container svg:has(> g[opacity="0.3"]) + .sibling-el,
.small-container svg > g[opacity="0.3"] {
opacity: .6 !important;
}
}

полностью решает проблемы с производительностью.
Мне любопытно, почему это так... Вы думаете, что это проблема браузера, который неправильно комбинирует селекторы? Или я просто что-то упускаю из того, как работает &-вложение?

Подробнее здесь: https://stackoverflow.com/questions/799 ... bottleneck