Skip to content

Sheet enters with a delay on widescreens #10808

Description

@georgereade

Provide a general summary of the issue here

Sheet takes noticeably long to appear after opening when using side sheets (position="end"/"start") on wide viewports. Most of the enter animation happens while the sheet is still off screen, so the user sees a pause before anything moves.

🤔 Expected Behavior?

The sheet should start appearing immediately after clicking the trigger.

😯 Current Behavior

When a Sheet opens, SheetOverlay's onEnter scrolls the container a full viewport. The sheet sits at the far edge of the viewport-sized stage, so it only becomes visible for the last sheetWidth px of that scroll.

For a typical side sheet (e.g. 375px wide on a 1440px viewport), ~70% of the scroll distance happens while the sheet is still off screen. Because the smooth scroll is eased and its duration is browser-controlled, there is a noticeable pause after pressing the trigger before the sheet starts sliding in. It gets worse as the viewport gets wider, and also applies to short bottom sheets on tall viewports.

The backdrop's swipeAnimation is tied to the sheet's view timeline, so it also stays transparent during this dead period.

💁 Possible Solution

In onEnter, before starting the smooth scroll, jump the scroller (instantly, with snapping temporarily disabled) to the position where the sheet's leading edge meets the viewport edge, then smooth-scroll to the rest position. Alternatively, size the scroll range to the sheet instead of the full viewport.

🔦 Context

We use sheets heavily throughout our app, (currently with Dialog + Modal). We're very keen to use Sheet as the mobile performance and drag to close are really good but the delay feels quite significant on wide screens.

🖥️ Steps to Reproduce

Go to the Sheet docs on a widescreen, change position to "end" and observe the delay for the backdrop to fade and sheet to enter.

Version

1.22.0

What browsers are you seeing the problem on?

Chrome, Microsoft Edge, Firefox

If other, please specify.

No response

What operating system are you using?

Windows 11

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

Activity

  1. devongovett commented on Oct 19, 2026

    @devongovett
    Member

    In onEnter, before starting the smooth scroll, jump the scroller (instantly, with snapping temporarily disabled) to the position where the sheet's leading edge meets the viewport edge, then smooth-scroll to the rest position.

    This makes sense to me!

  2. georgereade commented on Oct 20, 2026

    @georgereade
    ContributorAuthor

    That's great thanks @devongovett , I've opened a PR for this now #10815

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions