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

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

[rstoenescu]

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

[pdanpdan]

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