1px gaps due to imprecise scrollbar width calculation at non-default zoom levels

[andersk]

Current Behavior

To compute the width of a scrollbar, SimpleBar uses the scrollbarwidth library, which takes offsetWidth - clientWidth of a div with a scrollbar. Since offsetWidth and clientWidth are rounded to integers and the scrollbar width isn’t always an integer at some non-default browser zoom levels, this sometimes results in weird one-pixel layout gaps.

This test case consists of red SimpleBar divs of random widths on a blue background. When rendered at certain zoom levels, white gaps are visible on the right edges of some or all of the red divs. Chrome at 200% is an especially bad case:

Expected behavior

There should be no white gaps.

Reproducible example

https://jsfiddle.net/anderskaseorg/bhoqt7kc/

Suggested solution(s)

I sent a fix upstream to unmaintain/scrollbarWidth#2, but I’m not sure if the maintainer is active, so we may want to pull in the fixed scrollbarWidth function ourselves.

Additional context

Your environment

Software	Version(s)
SimpleBar	4.0.0-alpha.9
Browser	Chrome 75
Operating System	Ubuntu 19.04

[andersk]

This may be the cause of #303.

[Grsmto]

Should be fixed in 4.1.0

[gavin-murphy]

We're experiencing this issue on horizontal scroll bar in Chrome and MS Edge using latest 4.1.0

Edge appears to show approx 2 pixels of the native scroll bar.
Chrome 1px.