Use of "adjacent sibling" with "universal selector" triggers performance issue in Chrome

[paharvey]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

The CSS selector legend + * was added in commit c51e9fa4ee8fe8020decec064803e686eb9e1dde to fix a wrapping bug for Bootstrap v5.

Unfortunately, Google Chrome will re-check the styles of every sibling element when:

• the CSS selector legend + * is used; and
• we insert an element into any existing container element

This means that using Bootstrap v5 and dynamic DOM updates can create a performance issue in Google Chrome. For example, when using React virtualization we may have thousands of elements in a container and then add/remove a few sibling elements on each scroll event. The legend + * selector causes Chrome to recalculate the styles of every element, not just the newly added ones. This happens even if our DOM contains no legend elements.

This issue has already been reported to Chromium as issue 1305839.

Reduced test cases

https://codepen.io/paharvey/pen/rNpaaGe

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

v5.1.3

[mdo]

Not too concerned with this, so closing as stale.

[ffoodd]

As a sidenote on the topic, one may try to use CSS containment on the added elements to mitigate the issue.

[paharvey]

Sorry, but based on my reading I don't understand how CSS containment could mitigate the problem.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment