Drawer keep showing a horizontal scrollbar on opening. (Mini variant)
See original GitHub issueHi,
The Mini variant drawer from MUI is showing a bottom horizontal scrollbar while it’s transitioning from close to open, but not on the other way around (open to close).
The bug works on Chrome and Firefox. The official demo does have that bug too. https://material-ui.com/components/drawers/
- The issue is present in the latest release.
- I have searched the issues of this repository and believe that this is not a duplicate. (it might be related to this one ? https://github.com/mui-org/material-ui/pull/8112)
Current Behavior 😯
Either on my SPA and the on official demo of the mini drawer, when you open the drawer, it will display a bottom horizontal scrollbar while opening. The scrollbar disappear once the transition from close to open is finished. It works on Chrome, Firefox and Edge.
Official demo :
My SPA :
Expected Behavior 🤔
It shouldn’t display a scrollbar while opening (the permanent variant doesn’t).
Steps to Reproduce 🕹
Use the official demo from MUI. It has the same bug. https://material-ui.com/components/drawers/
Steps:
- Go the to Mini-drawer variant.
- Click on the Drawer menu icon on the top left.
- The horizontal scrollbar is displayed while the drawer is opening.
Context 🔦
It’s annoying for the users since it’s slightly raising up the links at the bottom of the Mini-drawer which are placed with :
MenuIconBottom: {
position: 'absolute',
bottom:0,
},
Your Environment 🌎
On Windows with dotnet new react -o <output_directory_name> -au Individual
Tech | Version |
---|---|
Material-UI | v4.8.0 |
React | 16.12.0 |
Browser | Chrome, Firefox, Edge |
.Net Core | 3.1 |
Issue Analytics
- State:
- Created 4 years ago
- Comments:7 (3 by maintainers)
Top GitHub Comments
Can confirm, it can be fixed with this diff:
overflowX: 'hidden'
is already being applied to the mini drawer, and I see no use case where a horizontal scroll bar will be required in a drawerHello, I can confirm now in 2021 it is still needed to add overflowX: “hidden” to the openedMixin theme to make the scrollbar disappear.