Sibling selector in injected styles causes large style recalculations

[zocario]

src/UI.js injects this rule into the page (still present in SDK 19.0.0, served by https://sdk.gleap.io/latest/index.js):

.gleap-tour-popover-navigation-btns button + button {
  margin-left: 4px;
}

Because the subject of this sibling selector is a bare button, Chrome restyles sibling subtrees whenever a node is inserted anywhere in the document, not only inside Gleap's UI. On a large app page (~19k DOM nodes, ~1.7k buttons), this doubled the style recalculation of every popover open/close: ~2,000 extra elements restyled per interaction, ~80–110 ms with 4x CPU throttling in a production build. Removing only this rule brings the recalculation back to its baseline.

The container is already a flex box:

.gleap-tour-popover-navigation-btns {
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
}

so adding gap: 4px; to it and dropping the button + button rule gives the same layout without the sibling selector.

We currently work around it by deleting the rule from style.gleap-styles at runtime and inserting .gleap-tour-popover-navigation-btns { gap: 4px; }.

[boehlerlukas]

Hey @zocario, thanks a lot for this report! Including the DOM sizes, the timings and the workaround made it really easy to confirm. You're right: that button + button rule was the only sibling selector we inject, and gap: 4px on the flex container gives the same layout. It's even a little cleaner, because the spacing also goes away when the Previous button is hidden.

The fix is in #165 and shipped in 19.0.1, which is live now on npm and on https://sdk.gleap.io/latest/index.js, so you can drop your runtime workaround. Thanks again for digging into this! 🙌

[zocario]

Thanks @boehlerlukas for the quick fix 🚀