First off, as a result of this new discovery, I have updated Girder and BalfBar.
I have recently been working on a new client website when I discovered what I'd say was glitch. This affects every website, every thing that I have worked on in the past few years and all my major projects and it's now fixed.
Every website I have ever created has been responsive since about 2012. As a result CSS media queries are a big thing in the design of these sites. However, it only came to me today that the way that these media queries work is not brilliant. Most crucially, this affected Girder and BalfBar on any website, but also affected my own website. Let's take a look at what this is.
The media gap
The two main methods of using media queries is using the min and max queries:
- @media only screen and (max-width: 768px)
- @media only screen and (min-width: 769px)
Combine these two queries to have a media query for mobile devices and a media query for desktop devices. All fine there. Except, there's a gap. If you can already see it then great, but if not let me explain.
First off, take a look at this graph. This what our media query would look like: left of the red bar is the mobile section and anything to the right of the red bar would be our desktop portion. But what about the red bar itself? This is where we have the issue, albeit a small issue, a complex issue to deal with at first.
It only struck me this afternoon that there are small gaps in the media queries developed for production that cause issues with this. The media queries do not specify what happens for the infinitely many real numbers that come between 768 and 769 such as 768.1, 768.2 or 768.35.
An important thing to note is that these media query issues only occur if there are two media queries back to back - one min and one max. Another thing to note is that > 768 and >= 769 are not the same here - this bit is key. This causes issues with things where the JavaScript and CSS are trying to achieve something at the same time.
A fix
A small fix I would suggest is adding granularity. For this example, a fix could be achieved with:
- @media only screen and (max-width: 768px)
- @media only screen and (min-width: 768.01px)
Another fix is to use just one media query here and stack changes in it. For instance, develop the mobile site then have a single min-width media query for all the changes applied to the desktop site. This is not ideal but it works and there's no need for the granularity with this type of query.
Why is this an issue?
The issue occurs with some browsers (such as Firefox) making some websites 767.200 pixels wide as opposed to a rounded number. There needs to be a better way to fix this issue.
