[Modal] Padding added to the body when opening

[TomPradat]

• The issue is present in the latest release. (4.9.5)

I've search the issues and this is related to a lot of issues, including this one => #10000

Current Behavior 😯

In my application, I sometimes get a padding-right added to the body when a Modal is opened.

Steps to Reproduce 🕹

I haven't find a way to reproduce this yet and it happens randomly.

Your Environment 🌎

Tech	Version
Material-UI	v4.9.5
Browser	Chrome v80

[TomPradat]

So I've investigated on this behavior, and adding the following css fixes it :

html {
    overflow: hidden;
}

It's really weird and seems to be a problem with the navigator. Sometimes when rendering a modal, the html tag gets a scrollbar.

This causes the ModalManager to add a padding based on this scrollbar width => https://github.com/mui-org/material-ui/packages/material-ui/src/Modal/ModalManager.js

[TomPradat]

The scrollbar appears beetween the moment the modal is rendered and the moment when the opacity of this modal is set to 1. This causes the isOverflowing in the ModalManager to return true

[TomPradat]

This is what happens in the sandbox from this comment.

I'm not sure what we should do about it though. Should we just provide the css fix in the documentation ?

[oliviertassinari]

The issue has been closed because it does not conform to our issue requirements.
Please provide a full reproduction test case. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!