Skip to content

Overlay Animation Causes Overflow #1231

@dgreif

Description

@dgreif

Describe the bug
All components built with Overlay can cause their parent container to overflow and show scrollbars for a second while the Overlay performs a slide-up animation after it is opened. This happens when the overlay is placed such that it can fit between its anchor and the bottom of the view port, but the slide-up animation cause it to transition from a placement that is outside the dimensions of the viewport.

Proposed Solution
We could account for the distance of the slide-up animation when calculating the placement of the overlay. If it won't fit below the anchor if you consider overlay height + transition height, then it needs to be placed elsewhere.

Alternatively, we could still place the overlay below the anchor, but shorten or skip the slide-up if there isn't room for it.

Open to other suggestions @vdepizzol

To Reproduce
Steps to reproduce the behavior:

  1. Go to the DropdownMenu story in storybook
  2. Adjust the Actions panel height so that there is just enough room for the DropdownMenu to open below the button
  3. Open the DropdownMenu
  4. Note the scroll bar flicker in and out on the right

Expected behavior
Overlay animation should not cause temporary overflow

Screenshots
CleanShot 2021-05-17 at 09 30 17

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions