[material-ui] Take browser zoom into account when calculating scrollbar size

[Zache]

This PR resolves an issue with to how the scrollbar is measured to prevent a horizontal shift that can happen to elements when applying the scroll lock for certain window sizes and zoom levels.

How to reproduce the scrollbar zoom issue?
(I'm using Windows 11 and Edge with 100% UI scaling in Windows.)

We can use the mui docs (for example Modal)

1. Open the dev tools so that you can easily know the exact window size, and change it to be 1200px wide (it doesn't have to be exact but the problem only occurs for some zoom level and window width combinations)
2. Zoom out to 90%
3. Trigger a scroll lock, I click the little ⋮ icon at the top of each Demo
4. You should see the "Post a comment" icon shift, and also the search bar and following icons in the AppBar
5. Without resizing the window change the zoom level to 80%
6. Now things act as desired, same for 75%, but it goes wrong for 67%

I have not been able to reproduce the issue for all zoom levels, but for various widths the problem occurs for the following zoom levels: 67%, 80%, 90%, 110%, 175%

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

https://deploy-preview-47408--material-ui.netlify.app/

Bundle size report

Bundle	Parsed size	Gzip size
@mui/material	🔺+340B(+0.07%)	🔺+131B(+0.09%)
@mui/lab	0B(0.00%)	0B(0.00%)
@mui/system	0B(0.00%)	0B(0.00%)
@mui/utils	🔺+340B(+2.65%)	🔺+117B(+2.32%)

Details of bundle changes

Generated by 🚫 dangerJS against 3900765

[ZeeshanTamboli]

@Zache Thanks for the PR. The rule is to separate out into two different PRs when doing two changes, even if they're minor.

[Zache]

Ok, I figured since they both resolve issues that occur with the scroll lock that they could go in together.

[Zache]

I split out the padding-right change to #47420

[ZeeshanTamboli]

@Zache Can you provide a screen-recording showing the issue? I tried your steps on Windows 10 and Chrome browser but I was unable to reproduce it.

[Zache]

Here is a screen recording of the problem: https://sendvid.com/ifpkx74b

[ZeeshanTamboli]

Here is a screen recording of the problem: https://sendvid.com/ifpkx74b

Thanks for the recording. I don't see any AppBar icons shifting when clicking the ⋮ icon in the demo. I do notice a slight page shift when the scrollbar is hidden, but that seems like expected behavior and should be fine.