I came across an interesting conundrum today1. I had zoomed into a webpage that uses both max-width and min-width media queries. I noticed that, while resizing the browser window, there was a brief moment where the layout was totally messed-up.
Turns out I seem to be the last web developer using Firefox2. And Firefox treats media queries much more literally than WebKit/Blink-based browsers.
When zoomed in, the viewport can assume sub-pixel sizes. Say my window is 401px wide and zoom is set to 200%, the visual viewport width will be 200.5px wide.
Assume the following CSS3:
#max200, #min201 {
display: none;
}
@media screen and (max-width: 200px) {
#max200 {
display: block;
}
}
@media screen and (min-width: 201px) {
#min201 {
display: block;
}
}
While Safari and Chromium will round up the actual value of the visual viewport to 201 when matching against media queries, Firefox will happily try to match 200.5 pixels against the given queries and neither of them will match, which will result in Firefox displaying neither the #max200 nor the #min201 element4.
One could argue this is a bug in Firefox but it seems like the behaviour is simply under-specified.
Now, how can this be solved? A simple workaround would be to use @media screen and (max-width: 200.999px) for the first query but this will result in an overlap where both elements are shown on all browsers. It seems when parsing the media query, all browsers agree an rounding, treating max-width: 200.999px the same as max-width: 201px5.
What do you think would be the right course of action here and who’d need to take it? Should Firefox follow suit and take control over sub-pixel values away from devs? Should media-queries be extended with a min-width-exclusive and max-width-exclusive construct?
Should web developers just live with this and hope no-one zooms and resizes their windows? Or should we restrict ourselves to only either use min-width or max-width queries but never mix them?
Discuss!
-
As with most interesting conundrums, it plays out mostly in the fringes; this one more literally than others. ↩
-
And, as it increasingly seems to me, one of the few who doesn’t just care about getting things to work but getting them to work on grounds of principle as opposed to accident. ↩
-
Try it on my test page. ↩
-
Interestingly, on 5x zoom level, Chrome also briefly hides both elements. I attribute this to rounding errors. Safari doesn’t but it also zooms to max 3x so maybe the rounding problems don’t manifest. ↩
-
Also, it would be ugly even if it worked, as it relies on the fact that browsers don’t have infinite zoom capability (and users don’t have infinite desires for zooming in). ↩
Top comments (1)
"... should we restrict ourselves to only either use min-width or max-width queries but never mix them?" Kind of, yes. Start off with a default value not restricted by a media query. That could be for the smallest screen if you're designing mobile-first, or the largest for super-size-screen-first or something in the mid-range of screens if you prefer. Then use max-width to override the default for smaller screens than your default target, and min-width to override the default for larger screens. Similarly for progressively smaller and larger screens. That way, your styling will never fall in a gap between the media queries.