Skip to content

Optimize Component Columns with contain: strict #9184

@tobiu

Description

@tobiu

To optimize grid scrolling performance, we can upgrade CSS containment for component-based columns from contain: layout paint style to contain: strict.
This allows the browser to completely skip layout and style recalculations for these components during scroll, treating them as rigid boxes.

Targets:

  1. GitHubOrgs: Add width: 100% and upgrade to strict.
  2. Heuristics (Impact): Add width: 100% and upgrade to strict.
  3. CountryFlag: Add height: 100% and upgrade to strict.

Note: Sparkline (Activity) already uses contain: strict. IconLink will remain as-is to preserve flexibility in non-grid contexts.

Metadata

Metadata

Assignees

Labels

aienhancementNew feature or requestperformancePerformance improvements and optimizations

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions