[Tabs] Fix an infinite loop

[caroe233]

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

I want the area for the scroll buttons of tabs to disappear when no scroll button should be displayed. Therefore I used CSS Override and set the width (or in this case the flexBasis) to 0:

MuiTabs: {
  scrollButtons: {
    flexBasis: 0
  }
}

This works fine most of the times, but in Edge with "weird" browser zoom factors, such as 105% it leads to an infinite loop. (I have not been able to reproduce this behavior with the standard zoom factors that are available in chrome...)

The code realizes that it needs to enable the left scroll button because the scrollWidth is bigger than the clientWidth. It then comes to the code and should realize that the scrollWidth is no longer bigger than (clientWidth + scrollLeft), but for some reason there seems to be a rounding issue for the scrollWidth property which leads to the scrollWidth property being 1px bigger than the (clientWidth + scrollLeft) property.

I fixed this by adding a "+ 1" to the condition to ignore rounding issues.

[mui-pr-bot]

Details of bundle changes.

Comparing: 2f6a982...04261e2

bundle	parsed diff	gzip diff	prev parsed	current parsed	prev gzip	current gzip
@material-ui/core	0.00%	0.00%	362,768	362,772	92,403	92,403
@material-ui/core/Paper	0.00%	0.00%	68,878	68,878	20,172	20,172
@material-ui/core/Paper.esm	0.00%	0.00%	63,340	63,340	19,264	19,264
@material-ui/core/Popper	0.00%	0.00%	30,458	30,458	10,566	10,566
@material-ui/core/styles/createMuiTheme	0.00%	0.00%	17,284	17,284	5,703	5,703
@material-ui/core/useMediaQuery	0.00%	0.00%	2,471	2,471	1,036	1,036
@material-ui/lab	0.00%	0.00%	170,726	170,726	50,110	50,110
@material-ui/styles	0.00%	0.00%	57,220	57,220	16,216	16,216
@material-ui/system	0.00%	0.00%	17,041	17,041	4,489	4,489
Button	0.00%	0.00%	91,218	91,218	26,957	26,957
Modal	0.00%	0.00%	90,263	90,263	26,728	26,728
colorManipulator	0.00%	0.00%	3,232	3,232	1,298	1,298
docs.landing	0.00%	0.00%	51,908	51,908	11,302	11,302
docs.main	0.00%	0.00%	648,034	648,034	201,660	201,660
packages/material-ui/build/umd/material-ui.production.min.js	0.00%	0.00%	311,223	311,227	85,394	85,396

Generated by 🚫 dangerJS against 04261e2

[oliviertassinari]

@caroe233 Thank you for taking the time to submit a pull request. However, we need a reproduction example before considering any changes. Could you provide one? Thank you!

[caroe233]

Hi @oliviertassinari ,

this is the sandbox: https://codesandbox.io/s/13mwv6llxl?fontsize=14

For reproducing the error, open the link in EDGE, open the preview in a new window (or use the following link going to the separated preview: https://13mwv6llxl.codesandbox.io/

You should see four tabs.

Then use your mousewheel to change the browser zoom to 105% and EDGE will crash.

Hope that's what you were asking for :)

[oliviertassinari]

@caroe233 Thank you! an extra pixel won't harm :)