UserAgent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

Steps to reproduce the problem:
When using CSS media queries that have boundaries differing by a pixel, it's possible to render between these breakpoints due to subpixel rendering usually encountered when zooming the browser.

Steps to reproduce are roughly,
1. Create a site that utilizes CSS media queries that have breakpoints differing by a single pixel. As a crude example,
  @media (min-width: 0) and (max-width: 1279) {
    .hide {
      display: none; 
    }      
  }

  @media (min-width: 1280) {
    .hide {
      display: none; 
    }      
  }

2. Resize the browser to a width of 1024px.
3. Zoom out to 80%.

Issue illustrated on codepen with angular-material CSS here,
  http://codepen.io/jvmccarthy/pen/oBMjQL
and without angular-material here,
  http://codepen.io/jvmccarthy/pen/zNLqOz

What is the expected behavior?
The browser should reasonably round the calculated width when rendering or should at least consistently report the width in window.innerWidth. 

What went wrong?
The browser renders CSS at the subpixel level between the two media queries. In the case of angular-material (and bootstrap), this causes elements to be shown that should be hidden. 

In this case, the calculated width comes out to 1279.999980926514px, which is so close to 1280px that a meaningful CSS breakpoint at the subpixel level would have to be max-width: 1279.99999px, which doesn't seem practical.

Also, the browser reports the window.innerWidth at 1280, so there is no simple way to detect the discrepancy between the rendered CSS width and the width reported in JavaScript.

Did this work before? N/A 

Chrome version: 56.0.2924.87  Channel: stable
OS Version: 10.0
Flash Version: Shockwave Flash 24.0 r0

An issue was filed in twbs/bootstrap about this (https://github.com/twbs/bootstrap/issues/21552). As linked in this issue, a corresponding issue has been field in w3c/csswg-drafts (https://github.com/w3c/csswg-drafts/issues/984) to address the media query endpoints. Perhaps this issue cannot be resolved until the W3C handles this topic. However, I am unable to reproduce this issue in Firefox and the discrepancy between the reported width and rendered width as well as the current required workarounds is cause for concern.

Also, I don't understand the complexity involved in devicePixelRatio calculations and would greatly appreciate some pointers on the topic. In particular, why is a zoom of 80% calculated to be devicePixelRatio=0.800000011920929 on a 1920x1080 display? Why not just 0.8? The amount of significant digits is intriguing. 

Thank you for the time and consideration.