Skip to content

Latency / two-step expand when minHeight is set in MaxHeightSmoother #294

@aymericzip

Description

@aymericzip

When minHeight > 0, the expand animation has a visible “dead time.”

It behaves like grid-rows-[0fr] → xfr (no visible change), then xfr → 1fr (visible)

Steps to Repro:

  1. Render MaxHeightSmoother with minHeight={450}.
  2. Toggle isHidden to expand (or use hover/focus paths).

Expected:
One smooth, continuous expand.

Actual:
Delayed/2-phase expand with an initial no-op period before content appears.

Notes:
Likely caused by the child minHeight clamping the grid track during grid-template-rows transition. Consider switching to animating max-height when minHeight is set, using minmax(0,1fr), or ensuring the grid item can shrink (min-height: 0).

Screen.Recording.2025-10-07.at.2.55.13.PM.mov

Metadata

Metadata

Assignees

No one assigned

    Labels

    UIUi related issuesdesignDesign task relateddesign-systemRelated to the design systemgood first issuejavascriptPull requests that update javascript codereactRelated to react.js

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions