[BUG?] vw, vh, vmax, vmin viewport units are affected by page zoom?

[dude99]

Not sure if this is a bug, but zoom shouldn't affecting viewport unit, but the latest v3.3 zoom causing element set in viewport unit to also enlarge/shrink like other elements...

What are viewport units?
https://www.sitepoint.com/css-viewport-units-quick-start/

[dude99]

This is a thicc scrollbar Im working on, it shouldn't change sizes during zoom, but both & previous versions all changes sized when zoom in/out:

html {overflow: overlay !important;}

@media only screen and (max-height: 300px) {
    ::-webkit-scrollbar {width: 6vh !important; height: 6vh !important; background: red;}
}

@media only screen and (min-height: 300px) {
    ::-webkit-scrollbar {width: 4.5vh !important; height: 4.5vh !important; background: green;}
}

@media only screen and (min-height: 450px) {
    ::-webkit-scrollbar {width: 3vh !important; height: 3vh !important; background: blue;}
} 

@media only screen and (min-height: 600px) {
    ::-webkit-scrollbar {width: 2.25vh !important; height: 2.25vh !important; background: orange;}
} 

@media only screen and (min-height: 745px) {
    ::-webkit-scrollbar {width: 1.8vh !important; height: 1.8vh !important;background: purple;} 
} 

@media only screen and (min-height: 900px) {
    ::-webkit-scrollbar {width: 1.5vh !important; height: 1.5vh !important; background: lime;} 
}

@media only screen and (min-height: 1080px) {
    ::-webkit-scrollbar {width: 1.25vh !important; height: 1.25vh !important; background: gold;} 
}

@media only screen and (min-height: 1400px) {
    ::-webkit-scrollbar {width: .96vh !important; height: .96vh !important; background: violet;} 
}

html {overflow: overlay !important;}

@media only screen and (max-width: 600px) {
    ::-webkit-scrollbar {width: 3vw !important; height: 3vw !important; background: red;}
}

@media only screen and (min-width: 600px) {
    ::-webkit-scrollbar {width: 2.3vw !important; height: 2.3vw !important; background: green;}
}

@media only screen and (min-width: 768px) {
    ::-webkit-scrollbar {width: 1.8vw !important; height: 1.8vw !important; background: blue;}
} 

@media only screen and (min-width: 992px) {
    ::-webkit-scrollbar {width: 1.5vw !important; height: 1.5vw !important;background: orange;} 
} 

@media only screen and (min-width: 1200px) {
    ::-webkit-scrollbar {width: 1.3vw !important; height: 1.3vw !important; background: lime;} 
}

@media only screen and (min-width: 1360px) {
    ::-webkit-scrollbar {width: 1.2vw !important; height: 1.2vw !important; background: gold;} 
}

@media only screen and (min-width: 1900px) {
    ::-webkit-scrollbar {width: .7vw !important; height: 1vw !important; background: violet;} 
}

original css mod post: https://forum.vivaldi.net/post/386037

[Pathduck]

@dude99 Why are many of your scrollbar declarations outside a selector in your original mod post? That's surely not going to work or what?

Also your code is full of redundant closing brackets... nvm

You can create an example of the issue here, then save it and share:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_custom_scrollbar2
Or use codepen.io if you have an account.

[dude99]

@Gwen-Dragon @Pathduck Thanks for the support.

Here is what happen when zoom in 500% & zoom out 80%, the test demo seems to work just fine, but the browser's scrollbar is changing size when zooming... Not sure what's the problem.

Here's the code I use for both tests, need css manager extension to test the browser's scrollbar:

https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha

or https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne

/* overlay scrollbar */
html {overflow: overlay !important; /*scroll-behavior: smooth;*/}


::-webkit-scrollbar {width: 1vmax !important; height: 1vmax !important;} 

@media (orientation: landscape) and (max-width: 1300px) {
    ::-webkit-scrollbar {width: 1.7vmax !important; height: 1.7vmax !important; background: red;} 
    ::-webkit-scrollbar-thumb {border-width: .15vmax !important;}
}

@media (orientation: landscape) and (max-width: 1000px) {
    ::-webkit-scrollbar {width: 2.2vmax !important; height: 2.2vmax !important; background: orange;} 
}

@media (orientation: landscape) and (max-width: 700px) {
    ::-webkit-scrollbar {width: 3vmax !important; height: 3vmax !important; background: yellow;} 
}

@media (orientation: portrait) {
    ::-webkit-scrollbar {width: 2.5vmax !important; height: 2.5vmax !important; background: blue;}
    ::-webkit-scrollbar-thumb {border-width: .15vmax !important;}
}

@media (orientation: portrait) and (max-height: 680px) {
    ::-webkit-scrollbar {width: 2.8vmax !important; height: 2.8vmax !important; background: cyan;}
}

[Pathduck]

Well, since the values are relative to the viewport, and zooming changes the viewport, it makes sense that they would change.

In your example screen capture above there's clearly two different styles being applied to the scrollbars, to the left the user style through Styles and to the right the example code from the page itself.

Have you tested this in other browsers to make sure it's not just an issue with the extension or that you misunderstand how these values are supposed to work?

[dude99]

@Pathduck

Well, since the values are relative to the viewport, and zooming changes the viewport, it makes sense that they would change.

Afaik vmax & vmin shouldn't be affected by web content zoom, because it use the width & height of the window as measurement.

It probably a chromium problem, I found similar complain about Chrome's viewport units mess up by zoom from recent post. My thicc scollbar mod doesn't affected by zoom a few months ago, but now it's pretty mess up when zoom in. LOL

I will report this as a bug later, hopefully they will fix this asap.
Thanks for all the support, guys.

[Pathduck]

@dude99 said in [BUG?] vw, vh, vmax, vmin viewport units are affected by page zoom?:

because it use the width & height of the window as measurement.

No, it uses the viewport and the viewport changes when zooming:
https://www.w3schools.com/code/tryit.asp?filename=GJDBJG7YOAQ7

Note how viewport changes when zooming.
https://whatismyviewport.com

This is the same in all browsers and is not a bug.

And then you use media queries to test for max-width (dependent on viewport), and change the width of the scrollbar which then changes (as expected).

The W3Schools documentation on this states that max-width applies to "The maximum width of the display area, such as a browser window", which is misleading - it applies to the viewport which is not the same thing.

You could've used device-width but this is deprecated:
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/device-width

thicc

The correct spelling is "thick", please use it.