Unnecessary negative margin at the bottom of Tabs scroller

[markbrocato]

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

When rendering Tabs, negative margin should not be placed at the bottom if the system doesn't show a scrollbar, as is the case on Mac OS when using a mouse that doesn't support touch gestures.

Current Behavior 😯

When I use a traditional mouse on Mac OS (one that doesn't have that fancy touch capability like the new apple mouses do), Tabs tries to insert margin to account for a scrollbar which isn't actually there. The problem immediately goes away when I unplug the mouse and reappears when I plug the mouse back in.

Steps to Reproduce 🕹

Link: https://react-storefront-boilerplate.moovweb.cloud/

1. You'll need to plug in a mouse that doesn't support touch gestures and be on Mac OS. I happened to be on Mojave and using an older logitech mouse.
2. Observe how the labels in the main navigation tabs (Category 1, Category 2, etc...) are no longer vertically centered. You can also see the hover menus being detached if you hover over one of the tabs.
3. You can also see this go away if you open the debugger and switch to a mobile device user agent.

Context 🔦

Just basic usage of scrolling tabs.

Your Environment 🌎

Tech	Version
Material-UI	v3.9.2
React	16.8
Browser	Chrome 72
TypeScript	No
etc.

[oliviertassinari]

@markbrocato Wow, it could very well be a bug with Chrome. We are measuring the scrollbar width, then we apply a negative margin to hide the scrollbar. I have a doubt regarding 1.
Do you have your mouse already plugged in when you visit the website?

The only solution I can think of is to disable the whole logic, maybe you would rather see the scrollbar? It's related to #14706.

[markbrocato]

@oliviertassinari Regarding step 1, a little clarification. You do need to resize the window after plugging/unplugging to trigger the relayout, but you don't actually need to reload the page.

I definitely don't want to see the scrollbar because it's unnecessary since we have the left and right arrows for scrolling. Is there any way to just disable adding the margin on Mac OS? I don't think it's ever necessary.

[oliviertassinari]

Is there any way to just disable adding the margin on Mac OS?

@markbrocato MacOS has an option to reproduce Windows scrollbar behavior. I don't think that it's a good direction. I would encourage you to POC around the documentation locally. I really have no idea on how we could solve the problem.

[sPaCeMoNk3yIam]

This margin is not unnecessary but instead it's not working correctly. ScrollbarSize is reporting a wrong value when on macOS and having turned on the default scrollbar behaviour - being "Automatically based on mouse or trackpad".
It is pictured here: #14706 (comment)
So either we introduce a default minimum size of around 20px or we find a way to recalculate the value when hovered (if possible).

[oliviertassinari]

@sPaCeMoNk3yIam I'm not aware of any good solution :/.

[kenzhemir]

Don't know if it is important, but I have noticed that you specify only macOS, however the demo looks differently in Chrome and Edge on Windows.

Chrome 73.0.3683.103

Microsoft Edge 44.17763.1.0

[oliviertassinari]

Closing as assuming it affects very few people.