Subpixel values of container width

[aldinezi]

When the wrapping container has witdth value in subpixels (eg. 500.25px), then applied gutter to minus right margin does not fully hide native scrollbar, while width values with decimal part above 0.5px work just fine.

[wangyi7099]

Hi I just set width to 500.25px for container,By the way, LGTM. Can you give a minimized repro ?

[aldinezi]

Unfortunately, I can not set width to fixed number of pixels, it is a percent value, and on various screens it is calculated to subpixel.
I will make a reproduction repo tonight and attach.

[wangyi7099]

Thanks, to the percent value, you can have a try to set sizeStrategy to number. Let vuescroll itself to have a fixed value, see address.

[aldinezi]

I have tried setting sizeStrategy at first, but it didn't make any difference. Still, native scrollbar was peaking out for about 1px.

[aldinezi]

Here's a minimal reproduction repo.
https://github.com/aldinezi/vuescrollsubpixel

If you don't see bug initialy, try resizing window to the width which will give main-container sized 25% some subpixel value, where the value after comma is below .5
You will imediately notice native scrollbar peaking.

Browser: Google Chrome 68.0.3440.75
OS: Ubuntu 18.04

[wangyi7099]

Hi! Will be fixed in next release

[wangyi7099]

try 4.7.1-rc.1

[aldinezi]

Unforutnately, this bug is active again.

You can try with updated reproduction repo

https://github.com/aldinezi/vuescrollsubpixel

[wangyi7099]

@aldinezi

Works well on my computer. Don't see the white line appear.

OS:
macOS High Sierra 10.13.6 and Windows 10

Does anyone else have the same problem too ?

[aldinezi]

I am experiencing this with Windows 10 and Ubuntu 18.04, both running latest Chrome and Firefox browsers.

[aldinezi]

http://aldinezi.tech/vuescrollsubpixel/

Hello, there is a deployed latest version, please test on browser stack or any other testing environment with non retina display.

[wangyi7099]

I dont know what causea this issue. I hide the native sceollbar by margin-right: -17px. But it seems that doesn't hide bar entirely.

[Solomka12]

@wangyi7099
This issue is still present on Windows 10 with Chrome v72.
It is present with horizontal scrolling too.
For now I solve it by setting:

.__panel {
    margin-right: -18px !important;
    height: calc(100% + 18px) !important;
}

[aldinezi]

@Solomka12 I got over this issue by setting back container background color to match the one on front container, so there's no unstayled div leaks.

That setting might cause you glitches with different browsers that have scrollbar width less or greather than 18px.