CSS Visibility (and QLayout) media-queries min/max bug

[githrdw]

Describe the bug
The CSS visibility utils like lt- and gt- are using $breakpoint-[...]-max as max-width @media query.
However, max-width works like <max-width, and not like <=max-width.
As the min-width is previous-max-width plus 1px, there falls a gap of 1px between max and min.

This results in inconsistent behaviour on some specific screen sizes (599, 1023, 1439, 1919) where no display: none will apply.
Also, when resizing the window it is worth noting that the layout 'flickers' when passing the given screen sizes.

Codepen/jsFiddle/Codesandbox (required)
https://jsfiddle.net/y4t86sgx/3/

To Reproduce
Steps to reproduce the behavior:

1. Go to https://jsfiddle.net/y4t86sgx/3/show
2. Open dev tools > device emulation / reponsive design-modus (CTRL+SHIFT+M)
3. Change device width to 599, 1023, 1439 or 1919px
4. Notice that given classes are not using the correct max-width

Expected behavior
There are two solutions;
Make $breakpoint-[...]-max same as $breakpoint-[...+1]-min
Or
Change lt-, gt- and q-layout-padding to use $breakpoint-[...+1]-min as max-width

Screenshots

Platform (please complete the following information):
Quasar Version: 2.0.0
@quasar/app Version: n/a

Quasar mode: modes where CSS classes are used

• SPA
• SSR
• PWA
• Electron
• Cordova
• Capacitor
• BEX

Tested on:

• SPA
• SSR
• PWA
• Electron
• Cordova
• Capacitor
• BEX

OS: Windows 10 Home
Node: 14.15.4
NPM: 7.18.1
Yarn: 1.22.10
Browsers: Edge 91.0.864.59, Firefox 89.0.2
iOS: Absolutely not
Android: 11
Electron: -

Additional context

[Ahriana]

just encountered this one on 1.16.3 the style just total breaks when using lt / gt if you fall within that pixel, which is easy to do when you use windows snapping

[pdanpdan]

I'm sorry, but what kind of broken browsers are you using?
Can you show a screenshot with one of the elements that should not be there visible in the inspector?

[githrdw]

This is MS Edge and Firefox (latest stable versions for a while).
Not happening in Safari (emulated) though.
In the meantime I discovered that it's only happening when I open my browsers on my widescreen, @Ahriana do you also encounter this?

Maybe it's a Windows bug that communicates window width incorrectly to browsers but I would like to see a workaround for this case because like Ahriana said, with snapping windows the given screen sizes are met and the whole style just messes up.

[pdanpdan]

Edge 91 is a chrome one or an old trident one?

Can you reproduce it in:

• recent Chrome
• recent Firefox
• recent Edge

Are you using any sort of zoom (in browser, HiDPI or how it is called the scaling in windows)?

All these questions are because:

• I cannot reproduce ir (chrome/edge/firefox on ubuntu and windows 10)
• from the code POV it should not happen (the breakpoint media intervals are continuous)

[pdanpdan]

Btw, firefox emulation mode is very bad, I would trust more Edge/Chrome/Safari dev tools
Or a firefox without emulation mode (just with inspector opened and sized so that the page has the width you want

And maybe also check in incognito mode with extensions disabled

[githrdw]

Are you using any sort of zoom (in browser, HiDPI or how it is called the scaling in windows)?

Ah good one! Yes I am using DPI scaling (in Windows 10 and 11), scaled to 125%.
When putting back into 100% this issue disappears, very interesting.
I think some browsermakers / operating system developers should be notified about this lol.

Also;
Reproduced in Chromium-based Edge v96.0.1054.62
Reproduced in Firefox v95.0.2 (64-bits)

Btw, firefox emulation mode is very bad

Good to know, thanks

[githrdw]

Just found this in the w3 specs about Media Queries:

While this ensures that the two sets of styles don’t apply simultaneously when the viewport width is 320px, it does not take into account the possibility of fractional viewport sizes which can occur as a result of non-integer pixel densities (e.g. on high-dpi displays or as a result of zooming/scaling). Any viewport widths that fall between 320px and 321px will result in none of the styles being applied.

One approach to work around this problem is to increase the precision of the values used for the comparison. Using the example above, changing the second comparison value to 320.01px significantly reduces the chance that a viewport width on a device would fall between the cracks.

@media (max-width: 320px) { /* styles for viewports <= 320px / }
@media (min-width: 320.01px) { / styles for viewports >= 320.01px */ }

However, in these situations, range context queries (which are not limited to “>=” and “<=” comparisons) offer a more appropriate solution:

@media (width <= 320px) { /* styles for viewports <= 320px / }
@media (width > 320px) { / styles for viewports > 320px */ }

https://www.w3.org/TR/mediaqueries-5/#mq-min-max

[pdanpdan]

ok, we (you) found the problem - I'll take a look at the fix :)
thank you for the help in identification

[Ahriana]

in my case, the gt- observes this issue also, say you have gt-sm and u sit on that 1px boundary gt- wont work at all, but col-sm functions as normal

i observed this on latest chrome and edge

[rstoenescu]

Enhancement will be available in Quasar v2.4.2 and v1.17