Media Query can fail on scaled displays

[thirstyape]

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework

Description

I found on a machine of mine that uses 125% display scaling with a 2560 x 1440 resolution if I snap a browser to 50% of the screen it ends up in a partial pixel width that is right between some of the @media queries. Even though you would think that with a calculation of 2560 / 1.25 * 0.50 = 1024 everything would be ok, the browser actually reports a width of 1023.20 pixels.

Now this means that neither queries with max-width: 1023px; nor queries with min-width: 1024px; will take effect.

Steps to Reproduce

1. Set display resolution to 2560 x 1440
2. Set display scale to 125%
3. Snap a browser window to either half of the screen
4. Try to open the nav menu on a site using the bulma CSS framework

Expected behavior

The menu in tablet mode should open when I click the "hamburger" icon.

Actual behavior

I noticed that when I tried to open the menu nothing happened. This is because the media query applies display: block; to items with .navbar-menu.is-active; however, none of the queries match due to partial pixels.

I am sure there are plenty more small issues that would occur due to this.

Possible fix

I took some time and found that in mixins.sass I can replace lines such as @media screen and (max-width: $device - 1px) with @media screen and (max-width: $device - 0.001px). The sass compiler does not seem to have any issue handling partial pixel values and browsers are ok with them as well.

[thirstyape]

For reference, here is the full fix

[jgthms]

That's interesting. I never considered that.

[c1rus]

this solution fixed for me screen width 1023px, but broked 1024px. I changed the value 0.001px with 0.1px and now its working in both cases.