Sub-Pixel calculation issue

[charsleysa]

Bug Report

What is the expected behavior?

No problems caused by subpixel calculations by browsers.

What is the current behavior?

If the browser ends up with the width of the viewport set to something like 1279.5px then neither the md nor the lg breakpoints match.

What are the steps to reproduce?

Here's a codepen showing the issue using basic CSS but same applies to this library: https://codepen.io/anon/pen/VqoGXP

What is the use-case or motivation for changing an existing behavior?

This really starts to apply to higher density screens with scaling turned of (such as a 2160p monitor with Windows set to 150% scaling and using 2 browsers on each half of the screen).

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

All.

Is there anything else we should know?

The fix is pretty simple, just add .9999 to the end of all the pixel values that are 1px less than the next break point (e.g. the md breakpoint max-width would be set to 1279.9999px).

[CaerusKaru]

In an absolutely ideal world, we would switch the syntax for our media queries to use Media Query Level 4 syntax (< 1280px and >= 1280px, etc). However, this is not an ideal world because that wouldn't work on IE11 and most older browsers.

I'll discuss modifying the media queries with @ThomasBurleson. In the meantime, if you'd like to submit a PR for this, we'd be happy to review it when ready.