LearnNewsExamplesServices
Frontmatter
id8962
titlePerf: Apply CSS containment to Grid Rows
stateClosed
labels
enhancementaiperformance
assigneestobiu
createdAtFeb 3, 2026, 2:01 PM
updatedAtFeb 3, 2026, 2:18 PM
githubUrlhttps://github.com/neomjs/neo/issues/8962
authortobiu
commentsCount1
parentIssue8930
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]
closedAtFeb 3, 2026, 2:18 PM

Perf: Apply CSS containment to Grid Rows

Closed v12.0.0 enhancementaiperformance
tobiu
tobiu commented on Feb 3, 2026, 2:01 PM

Since Neo.grid.Body manages row positions via absolute positioning (transform), the rows are independent of each other for layout purposes.

Task: Add contain: strict (or contain: layout paint) to the .neo-grid-row CSS class.

Benefits: This informs the browser that DOM updates within a row (e.g., text changes, canvas updates) do not affect the layout of the parent or siblings. This significantly reduces the cost of layout recalculations during heavy scrolling or real-time data updates.

Files:

  • resources/scss/src/grid/Body.scss
tobiu added the enhancement label on Feb 3, 2026, 2:01 PM
tobiu added the ai label on Feb 3, 2026, 2:01 PM
tobiu added the performance label on Feb 3, 2026, 2:01 PM
tobiu added parent issue #8930 on Feb 3, 2026, 2:01 PM
tobiu referenced in commit 4968f49 - "Perf: Apply CSS containment to Grid Rows (#8962)" on Feb 3, 2026, 2:16 PM
tobiu
tobiu Feb 3, 2026, 2:17 PM

Input from Gemini 3 Pro:

✦ I have applied CSS containment optimizations to Neo.grid.Body.

Changes:

  1. .neo-grid-row: Applied contain: strict. Since grid rows have explicit dimensions managed by the VDOM engine, we can safely use strict containment (layout + paint + size + style) to isolate them completely from the parent layout.
  2. .neo-grid-cell: Applied contain: layout paint style. Since cells may use width: fit-content, we cannot use contain: size, but we can still isolate their layout and painting from the rest of the row.
  3. .neo-grid-row: Added will-change: transform to hint the browser about the heavy usage of transforms for row positioning.

Outcome: Significant reduction in layout recalculation costs during scrolling and cell updates, as changes are now scoped to the individual row or cell boundary.

tobiu assigned to @tobiu on Feb 3, 2026, 2:18 PM
tobiu closed this issue on Feb 3, 2026, 2:18 PM