Native scroll bar is not hidden in Chrome, also scroll wrapper seems to be scrollable (even with overflow: hidden)

[sashasemeniuk]

I'm using a custom scrollbar for dropdown, but it seems that the native bottom scrollbar cannot be hidden, and also scroll wrapper seems to be scrollable. When I try to scroll, instead of moving the contents it's moving the content wrapper itself, even though the scroll wrapper has overflow: hidden

The issue has appeared after one of the last Chrome updates I guess.

Below is what I see on Chrome. In this case, I can't even scroll to the end of the list

And here's how it's supposed to look like (on Firefox):

Scroll wrapper CSS on Chrome (same for Firefox):

position: relative;
overflow: hidden;
width: 100%;
height: 100%;
min-height: 0px;
max-height: 200px;

Content wrapper CSS (Chrome):

position: relative;
overflow: scroll;
margin-right: -15px;
margin-bottom: -15px;
min-height: 15px;
max-height: 215px;

Content wrapper CSS (Firefox):

position: relative;
overflow: scroll;
margin-right: -12px;
margin-bottom: -12px;
min-height: 12px;
max-height: 212px;

For some reason as you can see it doesn't work in Chrome.

[sashasemeniuk]

Ok, nevermind. The issue was with another library, react-select. I just updated it to a newer version