Dialogs cause the vertical scrollbar to disappear and reappear

[orenh1]

Problem description

Every time a dialog appears (Dialog, Alert, Date Picker or Time Picker): if the document has a vertical scrollbar then it disappears, and reappears when the dialog is closed. This causes two annoying graphical glitches:

1. The document reflows in the background (since it has more horizontal room)
2. When the dialog is closed, it first jumps to the left a bit, and only then disappears

Link to minimal working code that reproduces the issue

This can be seen in the components demo. For example:

1. Go to the Date Picker demo page at http://www.material-ui.com/#/components/date-picker
2. Click on the first Date Picker field
3. Observe:
   a) In the background, the GitHub icon in the top-right corner moves to the right when the Date Picker appears, and to the left when the Date Picker disappears.
   b) When the dialog is closed, it jumps to the left before disappearing.

Related issues

I believe that the following issue has the same cause (I created a new issue in order to use the proper issue template):

#5977 [DatePicker & TimePicker] Why does the DatePicker and TimePicker shift a bit to the side when closed?

[JFGHT]

Are you sure this is not intended to be like that?

[orenh1]

Screen elements that jump around are a bad UI experience.

For an example of how this could work better, see the Dialog in the react-md project: https://react-md.mlaursen.com/components/dialogs . In react-md, when a dialog appears the document's scrollbar is just disabled; it's not removed. This eliminates the jump.

If you want to see what Google does, open an Android app that has a scrollbar and then open a dialog. You'll see that neither the background page nor the dialog jump. (E.g., in the Phone > Log screen).

[ncirkel]

Another side effect for me was the page scrolling back to top whenever a dialog opened. As a workaround I've set body { overflow: visible !important; }, which cancels the inline overflow: hidden; that's being set on the body whenever a dialog is opened. For me, the original page being able to scroll in the background is actually not a problem at all.

[oliviertassinari]

We have fixed that issue on the v1-alpha branch by applying an extra padding to compensate the missing scrollbar width. We are following the bootstrap solution. Adding overflow: hidden is important in order to prevent scroll on the underlying elements.

[Aditya94A]

This is still happening for me (in the latest beta) when opening a dialog or even a Menu :/

[gregnb]

I am also having this issue in the Dialog and the Popover component

[marshall-cho]

Same thing here, triggering Popover makes the whole page jump to the left due to padding-right: 15px; added to the body element...

[felansu]

[rafamarqqqs]

I was having the same problem, but I've found a way to work around this by adding specific global styling to my index.html:

<style>
  html {
    overflow-y: auto;
    overflow-x: hidden;
  }

  body, #root {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
  }
</style>

The overflow rules applies to the html element and overrides the modal rules. Dunno if this is ok though

[oliviertassinari]

Let's move the discussing to #10000.

[fastlogin]

I experienced the same problems working with Dialogs. The following is the only solution that I have tried that both removes the shifting of content and still locks the scroll of the underlying page/removes its scrollbar.

Solution:
Go to the outermost container div or any outermost div (any container that encapsulates your entire app) in your app and set its width to this:

width: calc(100vw - 1px);

1px can be substituted with 34px or any other low value. This will make it so that opening a Dialog will hide the scroll bar of the underlying page, if present, and will not create any sort of shift in the position of the content. Scrolling is still locked for the underlying page and scrolling is still possible for your dialog.

[AdrianMrn]

Setting the document's width to 100vw prevents this from happening:

html {
  height: 100svh;
  width: 100vw;
  overflow-y: scroll;
}