Drawer keep showing a horizontal scrollbar on opening. (Mini variant)

Hi,

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:

1. Go the to Mini-drawer variant.
2. Click on the Drawer menu icon on the top left.
3. 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

[r3dm1ke]

Can confirm, it can be fixed with this diff:

index 1bd5ee5b1..acb03460b 100644
--- a/packages/material-ui/src/Drawer/Drawer.js
+++ b/packages/material-ui/src/Drawer/Drawer.js
@@ -20,6 +20,7 @@ export const styles = theme => ({
   /* Styles applied to the `Paper` component. */
   paper: {
     overflowY: 'auto',
+    overflowX: 'hidden',
     display: 'flex',
     flexDirection: 'column',
     height: '100%',

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 drawer

[AlvesJorge]

Hello, I can confirm now in 2021 it is still needed to add overflowX: “hidden” to the openedMixin theme to make the scrollbar disappear.