vuescroll icon indicating copy to clipboard operation
vuescroll copied to clipboard

Subpixel values of container width

Open aldinezi opened this issue 7 years ago • 14 comments
trafficstars

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.

aldinezi avatar Jul 26 '18 08:07 aldinezi

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

wangyi7099 avatar Jul 26 '18 08:07 wangyi7099

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.

aldinezi avatar Jul 26 '18 09:07 aldinezi

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.

wangyi7099 avatar Jul 26 '18 09:07 wangyi7099

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

aldinezi avatar Jul 26 '18 10:07 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

screen

aldinezi avatar Jul 26 '18 16:07 aldinezi

Hi! Will be fixed in next release

wangyi7099 avatar Jul 27 '18 02:07 wangyi7099

try 4.7.1-rc.1

wangyi7099 avatar Jul 30 '18 12:07 wangyi7099

Unforutnately, this bug is active again.

You can try with updated reproduction repo

https://github.com/aldinezi/vuescrollsubpixel

aldinezi avatar Sep 21 '18 13:09 aldinezi

@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 ?

wangyi7099 avatar Sep 21 '18 13:09 wangyi7099

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

aldinezi avatar Sep 21 '18 19:09 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.

aldinezi avatar Sep 24 '18 19:09 aldinezi

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.

wangyi7099 avatar Sep 25 '18 04:09 wangyi7099

@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;
}

Solomka12 avatar Mar 13 '19 11:03 Solomka12

@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.

aldinezi avatar Mar 13 '19 11:03 aldinezi