Skip to content

Reduce per-switch chat transcript reflow with content-visibility on off-screen rows #661

Description

@hamzamerzic

Context

Switching chats mounts the chat view, which reads layout synchronously over a heavy transcript (a long chat is thousands of DOM nodes), forcing a large style/layout reflow (~90 ms measured on a mid-range phone with the field probe, perfProbe.js). A recent change moves this off the discrete tap (startTransition in applyModeDestination) so it no longer blocks input, but the reflow still happens once per switch in the deferred render and scales with transcript size.

Idea

Apply content-visibility: auto with a contain-intrinsic-size estimate to off-screen message rows so the browser skips their layout/paint until they scroll near the viewport — cutting the reflow proportionally to how much of the transcript is off-screen.

Risk / what to verify

content-visibility: auto changes how off-screen content contributes to scroll height, and the scroll controller (useScrollMode) reads exact geometry (scrollHeight, offsetTop) to restore the reading position. The main work is proving saved-anchor restoration stays exact under intrinsic-size estimates, across streaming growth, image loads, and pagination. Measure before/after with the field probe and keep the scroll lock-in tests green.

Acceptance

  • Measurable reduction in per-switch forced-layout time on a real device.
  • No regression in scroll-position restoration or the reveal/anchor tests.

Companion approach: a separate issue proposes reducing the mount-time synchronous layout reads in useScrollMode.

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: uiUser interface and interaction designenhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions