fix(14-perf): fix scroll jumping and input latency

Root causes addressed:
- track-list had no _itemSize hint for flow layout — virtualizer
  defaulted to 100px, measured actual ~33px rows, then called
  _correctScrollError/scrollTo on every scroll causing visible jumps
- will-change:transform on virtualizer elements caused nested GPU
  layers (virtualizer positions children with transforms internally)
  adding compositor overhead instead of helping
- content-visibility:auto on album cards conflicted with virtualizer's
  own DOM recycling, causing redundant layout recalculation
- track-list visibilityChanged handler wrote to store synchronously
  on every event (per-item during scroll) without any throttling
- IIFE closure in renderTrackRow created a new function per row per render

Fixes applied:
- Add _itemSize:{height:33} + fixed height:33px on .track-row (matches
  queue-panel pattern that already worked smoothly)
- Add overflow-anchor:none on track-list virtualizer
- Remove will-change:transform from all 6 scroll containers
- Remove content-visibility:auto from album cards
- RAF-throttle visibilityChanged scroll position saves
- Replace IIFE with direct cols.map() in template
This commit is contained in:
2026-03-14 14:46:38 -04:00
parent 4b7d35d7ec
commit 3b2e189e7d
9 changed files with 45 additions and 30 deletions
@@ -131,7 +131,6 @@ const gridStyles = css`
position: relative;
overflow-y: auto;
contain: paint;
will-change: transform;
}
/* ========================================
@@ -149,8 +148,6 @@ const gridStyles = css`
transform 0.15s ease;
box-sizing: border-box;
width: var(--card-width, 176px);
content-visibility: auto;
contain-intrinsic-size: auto var(--card-width, 176px) auto calc(var(--card-width, 176px) + 40px);
}
.album-card:hover {