Media Query Lost In Firefox When Window Resized To Max-width Minus Scrollbar Width

This is my first attempt at a responsive site design and have run into a weird issue where media queries are lost at particular window widths in Firefox 32 for Windows 7 (so far an

Solution 1:

It's not a bug, it's a feature.

Firefox interprets the media values on a sub-pixel level, e.g. not as an integer value but as a floating point value. Therefore, a gap of 1px exists between a min-width of X and a max-width of X+1, where no definition applies. It seems counterintuitive that it is possible to set the size of the viewport on a sub-pixel level, but think about the effect of magnification, where the pixel value is multiplied with a given factor.

As the media selector doesn't provide any ">" or "<" operators, you have to set the max-width to X+0.01 instead of X+1. Although this workaround leaves a gap of 0.01 pixel, one can reasonably assume that it will never show up.

Of course you can also use X+0.000001... if that gives you peace of mind ;-)