-
Notifications
You must be signed in to change notification settings - Fork 644
Description
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:
- Go to the DropdownMenu story in storybook
- Adjust the Actions panel height so that there is just enough room for the DropdownMenu to open below the button
- Open the DropdownMenu
- Note the scroll bar flicker in and out on the right
Expected behavior
Overlay animation should not cause temporary overflow
