Skip to content

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

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