Media queries not triggered at breakpoints on Firefox with display scaling enabled

[warrenrodrigues]

Current Behavior

CSS media queries are not triggered at exactly the responsive breakpoints (601px, 993px, 1201px) on Mozilla Firefox (latest) on Windows 10 with Display Scaling other than 100% (my display is at 125%.)

This is not specifically a Materialize issue, but needs attention. Bootstrap applied a fix some years ago.

Here is a simple Codepen to understand the issue and here is a detailed blog post to further understand the issue (screenshots included.)

There are also minor inconsistencies with min-width set to 600px (instead of 601px) in some places in the following files

• ./materialize/sass/components/_global.scss
• ./materialize/sass/components/_typography.scss

Possible Solution

I have forked the project and have the following fixes ready. I can submit a PR.

1. Set the min-width to integers, but change the max-width to a fraction (600.99px, 992.99px, 1200.99px)
2. Fix the variables in the above 2 files.