React-custom-scrollbars: Browser default scrollbars not being hidden in Chrome/Firefox when using page zoom

[tomfin46]

Have only been able to reproduce this in Chrome and Firefox, seems ok in both IE11 and Edge.
Using the latest 4.0.0-beta.1 release although can see the issue on the projects demo page as shown below

Chrome:

IE11

[malte-wessel]

This seems to be a problem on Windows. Can't reproduce on OSX.
I guess there's an issue with getScrollbarsWidth. Would be cool if you could investigate on this!

[simonkberg]

I'm able to repro on linux, however it only happens when you zoom out _after_ the initial load. Since the scrollbars don't "scale", they eventually become visible as the element sizes shrink. getScrollbarsWidth would need to be triggered also "on zoom" to get the correct size values, but no browser event is available for this so it would require some ugly workarounds to fix.

One idea would be to add extra padding on the "view" to offset the native scrollbars even more:

const scrollbarWidth = getScrollbarsWidth()
const extraOffset = scrollbarWidth * 10
const styleHack = {
  right: `-${extraOffset}px`,
  bottom: `-${extraOffset}px`,
  paddingRight: `${extraOffset - scrollbarWidth}px`
  paddingBottom: `${extraOffset - scrollbarWidth}px`
}

Or something similar. Still pretty ugly, but it works in my quick browser tests on the demo page.

[realcr]

I can reproduce this bug on Linux Ubuntu with both Firefox and Chrome.

[realcr]

I tried to change

overflow: 'scroll',

into

overflow: 'hidden',

at https://github.com/malte-wessel/react-custom-scrollbars/blob/master/src/Scrollbars/styles.js#L19
This helps a little bit, as you don't see the scrollbars any more when scrolling. It is still not perfect: there is a difference in color around the edges.

Does it break anything to change it from 'scroll' to 'hidden'?

[malte-wessel]

Yes, I guess that the native scrolling behaviour will be disabled. I'll see what I can do about this next week.

[realcr]

@male-wessel: I see. Thank you for your great work!

[danbrianwhite]

I don't have time at the moment to update my branch for a pull request (https://github.com/danbrianwhite/react-custom-scrollbars/). In my branch I changed package name and checked in lib folder (react-custom-scrollbars-plus). This issue is resolved in my branch as long as you reload the browser after zooming in. If you wanted to update the scrollbars when someone zoomed in with the page loaded, you would have to update the scrollbar width upon the change (or poll the window for size changes).

The changes I made also always displaying scrollbars for OSx and iOS. (#53) I still used the native scroll window so the scrolling is still native performance on iOS.

[ghost]

I've resolved that problem ^

[StephanUa]

@malte-wessel Do you have any ideas how to fix this issue? Will you work on that?

[philraj]

This doesn't seem to be fixed in recent version of Chrome and Firefox, on macOS at least.

[philraj]

This should be re-opened, it's no longer fixed in Windows either.

[RussCoder]

@malte-wessel I also have the same problem. When I zoom out the page, native scrollbars appear. The issue should be re-opened,