Media query lost in Firefox when window resized to

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 anyway).

When slowly resizing the window it can result in a flash of (mostly) unstyled content at breakpoints. If I carefully resize the window I can hit widths that are between breakpoints. I end up seeing the default styles as the media queries are lost in both cases.

For instance, max-width 768px is one breakpoint and when the window is resized to 767px it should load a new media query. In this case, the next one down has a 600px-wide layout.

In Firefox 32 in Windows 7, however, the new media query isn't loaded if I'm able to make the browser window something like 767.4px wide.

When I inspect the code, the computed HTML shows the width with a decimal value. This is unlike my other browsers which all seem to round to whole numbers.

I have tried changing values in my styles and HTML media queries that use either ems, rems or px values. Some changes have resulted in other browsers having similar issues between breakpoints. I've found that using pixel widths gives the best results but doesn't solve the FF32 issue.

Here's the PHP page code:

<!doctype html>
<html lang="en">
<head>
<title>This is the title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0;" />
<meta name="description" content="This is the description.">
<link rel="shortcut icon" href="favicon.ico">
<link rel="image_src" href="http://www.website.ca/image.gif">
<link rel="stylesheet" href="styles/styles-base.css">
<link rel="stylesheet" href="styles/styles-320.css" media="only screen and (min-width: 0px) and (max-width: 479px)">
<link rel="stylesheet" href="styles/styles-480.css" media="only screen and (min-width: 480px) and (max-width: 599px)">
<link rel="stylesheet" href="styles/styles-600.css" media="only screen and (min-width: 600px) and (max-width: 767px)">
<link rel="stylesheet" href="styles/styles-768.css" media="only screen and (min-width: 768px) and (max-width: 959px)">
<link rel="stylesheet" href="styles/styles-960.css" media="only screen and (min-width: 960px) and (max-width: 1223px)">
<link rel="stylesheet" href="styles/styles-1224.css" media="only screen and (min-width: 1224px)">
<link rel="stylesheet" href="webfonts/ss-standard.css">
<?php include("includes/head_typekit.php")?>
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="scripts/mobilenav.js"></script>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>

<body id="page-overview">
    <div id="wrapper">

Here are the related default styles from styles-base.css:

body {
    background-color: #eaf6f8;
    font-family: "ff-meta-web-pro", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    width: 100%;
}

/* . . . */

#wrapper {
    background-color: #fff;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

Here's an example from one of the stylesheets, which all follow this approach:

#wrapper {
    width: 1224px;
}

Any suggestions on how to solve this or to improve my code if it requires any fixing?

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 ;-)