Vaadin's engineering team shares three CSS optimizations made for Grid and Tree Grid in Vaadin 25 to address severe rendering slowdowns with the new Aura theme. The key fixes were: replacing CSS box shadows (computed via custom properties) with regular borders, cutting rendering time by ~50%; switching from CSS part attribute selectors to class selectors, reducing selector match attempts by 3.5x and improving scrolling frame time from 90ms to 40ms; and registering CSS custom properties that use light-dark() with explicit <color> syntax via the Houdini @property API, reducing Aura rendering time by ~60%. Together these brought a 180-column grid's initial render from ~7.2s down to ~1s.
Table of contents
IntroductionUsing CSS Borders instead of Box ShadowsReplacing CSS Attribute Selectors with Classes InternallyRegistering CSS Custom Properties as Colors ExplicitlyPerformance Work Continues2 Comments
Sort: