Glitch / Rendering problem with custom scrollbar when window size is on the "activation" spot

[gabrielgatu]

What is the current behavior?

I'm using this library inside the main product of my startup, and many users told us that they were getting a strange "vibration" effect when resizing the window.

So I've tried to replicate it, and sure enough, there is a strange glitch when you have the window size to the point were the scrollbar wants to show itself, and it creates this "vibration" effect, as you can see from the video I've linked.

Steps to reproduce

Well, you can try it on our platform: https://edu.fudeo.it/app/home
Just set the window size to "1301x708"

What is the expected behavior?

It should not vibrate :)

A little about versions:

• OS: MacOS (happens on Windows as well)
• Browser (vendor and version): Chrome 86 (Happens on Safari as well)
• React: 17.0.1 (happens with 16.x.x as well)
• react-scrollbars-custom: 4.0.25
• Did this worked in the previous package version? Don't know

[xobotyi]

Ooof =)
Hard one which i dont know how to even resolve. In your markup and this resolution it has state that without right scrollbar it does need the scroll and with it it does not, i dont see any chance of fixing this without tweaking some margins.
Also i wonder how would default scrollbars behave, could you make some tests on default behaviour? (react devtools allow to change props only unless next re-render)

[gabrielgatu]

Hey wow thanks for the quick reply! I really appreciate it since a lot of our app depends on this library!

My fault for not saying that in the post above: I've tried with the "native" prop and it's working as intended (doesn't show the scrollbar with these sizes, if I shrink the window a little bit more it lets me scroll correctly).

Of course I cannot use the "native" prop since I need to show a custom scrollbar and control it's visibility, hence why your library works so well for us.

I thought about tweaking some margins as well, if you don't want to merge them directly in this repo (I can understand that) could you point me to where should I add them? For sure I need to fix this for our users :)

[xobotyi]

@gabrielgatu i mean from the content side if you're not strict to internal margins otherwise it requires some changes in library, i've almost got how to fix it..

[gabrielgatu]

Got it.. I'm gonna try and make some changes to see if I can resolve it this way.
Let me know if you have any progress on the internal fix as well :) Hope I didn't ruin your evening and big congrats for this awesome library!

[davidgolden]

For anyone else running into this issue, I also had this problem and since I'm dealing with dynamic data I couldn't just adjust the margins. My scrollbar element is absolutely positioned, so I just set it to display permanently. That way is disappears when not needed (via internal css) but is visible when needed. Since it's always rendered on the page, it doesn't glitch out.

permanentTrackY={true}
style={{width: "100%", height: "100%", position: "absolute"}}

[hshahdramafever]

I added this disableTrackYWidthCompensation to fix this issue