.hidden-* broken for subpixel display widths between breakpoints.

[federico-peralta-schaffner]

Consider the following two spans:

<span class="hidden-lg-up" style="color: blue; ">Visible on xs, sm and md</span>
<span class="hidden-md-down" style="color: red; ">Visible from lg on, I can be longer</span>

The idea is that only one span is displayed at any given time. The blue one should be displayed on xs, sm and md viewports, while the red one is for lg and xl viewports.

However, in my laptop, when the width of the viewport is reported to be 991px, both spans are displayed.

Here's the reduced test case: JS Bin

To reproduce, manually change the width of the Output iframe until the reported width reaches 991px.

I think that this happens because Chrome reports a width of 991.4 pixels (I've used Chrome DevTools to check this). And the relevant media queries for Bootstrap's hidden responsive utilities are as follows:

@media (max-width: 991px) {
  .hidden-md-down {
    display: none !important;
  }
}
@media (min-width: 992px) {
  .hidden-lg-up {
    display: none !important;
  }
}

This means that, when the width of the viewport is between 991px and 992px (and mine seems to be 991.4px), none of the media queries above evaluates to true, so both spans end up being displayed.

I know that these pixels are not real pixels, but logical CSS pixels, abstracted by the browser. Despite this, I think that Bootstrap should not depend on how the browser converts real pixels to CSS abstracted pixels in order to behave as expected.

Maybe the media queries can be modified to include decimals?
I.e. @media (max-width: 991.999999px)
Here's the idea: JS Bin

OS: windows 10 home
browser: chrome v 55.0.2883.87 m
hardware: asus ux303u notebook pc
display configuration: 3200 real pixels wide, but screen is OS-zoomed to 250% recommended setting

[mdo]

This has come up in a couple issues I think, but I don't see that there's anything we can do about it. Modifying media queries to use crazy decimals doesn't seem like the ideal answer either as it'll just bring up more questions and potential confusion.

For the time being, I'm thinking this is a won't fix. Ideally this is something that is resolved with browser vendors who have the power to control how their pixels are rendered more than us.

[patrickhlauke]

FWIW filed w3c/csswg-drafts#984

[patrickhlauke]

note that the CSS Mediaqueries spec now includes this note w3c/csswg-drafts#1083 - now we can unfortunately only wait until browsers add solid support for the more appropriate range context queries...