Fix: don't save scrollbarWidth while zero offsetWidth and clientWidth

[VictoriaOtm]

Hi! We use react-custom-scrollbars-2 in our project and we found a rare bug, so here is the fix.

Context:

We use custom scrollbars in widget which is opened inside an iframe. And it works fine. But we have a case when we open this iframe inside another iframe and our scroll bars are looking like this:

This is happening with Google Chrome on Windows and on Mac (if "Show scroll bars" parameter is set to "Always" in Mac General settings). Safari and FireFox are okay.

Reason:

In this case margin-right and margin-bottom of the scrollbar are supposed to be -15px (the exact number depends on the platform). But we have 0px instead. Why? Because during first render iterations we have div.offsetWidth === 0 and div.clientWidth === 0. I'm not sure about the initial reason, but I suppose there are might be some Chrome optimizations. This div really exists in DOM with all styles and computed styles also say it is 100x100 px, but if you call its client and offset width by DevTools console, you'll get 0.

Solution:

In this abnormal case we just shouldn't set up scrollbarWidth to 0 and save in cache immediately, we should wait until div.offsetWidth and div.clientWidth become normal. We tested it and saw that it renders okay after several iterations. Here is the console log of div.offsetWidth and div.clientWidth right after this line:

The fix doesn't affect usual behaviour, because normally you have non zero width at the very first iteration.

It would be great to have a new version of the package with the fix. If you have any concerns or better ideas, I will be thankful!