[useMediaQuery] Safari scrollbar unstable

[CloudNiner]

• 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 🤔

The menu should toggle once only when the menu icon is clicked.

Steps to Reproduce 🕹

Steps:

1. Set display resolution to "Looks like 1280x800"
2. Make the Safari window fill the entire laptop screen
3. Open Safari 14.0+ on MacOS
4. Go to https://material-ui.com/getting-started/installation/ and click the menu icon in the top left

Context 🔦

I cannot reproduce this issue on the homepage (https://material-ui.com), only on the documentation pages.

I cannot reproduce this bug in Firefox, even at the same resolution and window width that the error occurs at in Safari.

The bug only happens when the Safari window is a specific size:

Your Environment 🌎

Tech	Version
Browser	Safari 14.0
etc.	macOS Catalina 10.15.7, 2560x1600 display resolution, Display scaling set to "looks like 1280x800" (2x)

[oliviertassinari]

This looks like a known limitation: #20947, #13296 that we have ignored so far.

[oliviertassinari]

It's definitely a bug on the Safari side, here is what the specification says:

For continuous media, this is the width of the viewport (as described by CSS2, section 9.1.1 [CSS21]) including the size of a rendered scroll bar (if any).

The same issue in the bug tracker of Safari: https://bugs.webkit.org/show_bug.cgi?id=52653. I could also find this nice illustration: tailwindlabs/tailwindcss#1521 of the problem.

---

Regarding the resolution, the documentation is affected since we started using media queries over window.innerWidth in <Hidden>. We could:

1. Wait for Safari to fix this, ignore the issue in the meantime. Safari has a low market share and the instability is on a 15 pixels area, it's relatively OK.
2. Introduce a window.innerWidth back, but I don't really see anny opportunity for such a change. We might drop Hidden in v5 [Hidden] Remove component #19704. We would encourage to use the <Box sx={{ display:{ xs: 'none', md: 'block' } }}> API as a replacement that leverage CSS. However, I think that we should get something similar for JavaScript. The useMediaQuery hook mental model is a bit too far. I would imagine that:

const breakpoint = useBreakpointValue(); // xs or sm, etc.
const prop = useBreakpoint({ xs: 'none', md: 'block' });  // none or block

would do a great job. Perfect for when you need to switch from a CSS to JS implementation of something or when you want to have the system responsive capability on React component props. cc @mnajdova. Benchmark See #23885.

I'm leaning for option 1.