[CssBaseline] Persistent scrollbar in dark mode

[mbrookes]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Expected Behavior 🤔

Steps to Reproduce 🕹

Steps:

1. Visit https://next.material-ui.com/
2. Enable dark mode
3. Notice scrollbar and layout shift

Your Environment 🌎

Tech	Version
Material-UI	v5.0.0-alpha.16
Browser	Google Chrome Version 86.0.4240.111 (Official Build) (x86_64)
OS	MacOS Catalin 10.15.7

[mbrookes]

Related? #23407

[oliviertassinari]

Interesting. In my configuration of macOS, I force the scrollbar (why? to be closer to the UX end-users have on Windows), so I couldn't see this change of behavior when working on #23407.

[oliviertassinari]

@eps1lon I start to think that https://github.com/mui-org/material-ui-x/issues/510 could be interesting. YouTube, Facebook, Gmail are using custom scrollbars. This is a strong signal.

[efoken]

Having the same issue 😕 As soon as the scrollbars are styled with CSS, they are always visible on macOS, so I think this styling should be optional

[carlhopf]

By default MacOS has auto hiding scrollbars and I believe most users will expect this behaviour.

Since there's no way to un-do or override the ::-webkit-scrollbar styling to get back to system default behaviour, I also think the scrollbar styling should be optional (or a way to turn it off) 😄

[oliviertassinari]

Yeah ok, it seems too opinionated to be done by default for macOS users. Maybe an opt-out flag?

@mbrookes would it work with you if we keep it enabled by default?

[mbrookes]

Would OS detection be too icky? It's never going to be nice on Mac while it's enabled, and the system default scroll bar is perfectly fine for both light and dark mode, so Macs don't need the custom scrollbar styles.

[oliviertassinari]

Would OS detection be too icky? It's never going to be nice on Mac while it's enabled

Well, I'm personally not using the autohide scrollbar feature of macOS, I like it just fine with the scrollbar always visible. Maybe because I was used to it for so many years on Windows. As far as I know, CSS OS detection isn't possible.

So opt-in flag? Should we enable it for the docs? Note that we have also the same CSS logic applied on the DataGrid. It could be interesting to export the CSS object to not duplicate it.

[mbrookes]

As far as I know, CSS OS detection isn't possible.

I meant in JS, to determine whether to apply the CSS, but... SSR

So opt-in flag?

Preferably

Should we enable it for the docs?

I don't know. Just how bad do scrollbars look on Windows in dark mode?