3

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?

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
dugost
  • 31
  • 2
  • I cannot make my browser have fractional width. But you can set your media queries to fractional sizes (*never seen anyone use it though*). So setting `and (max-width: 767.999px)` might solve this weird issue you are having.. – Gabriele Petrioli Jan 23 '15 at 01:31
  • I read on a site somewhere this week about doing something similar with EMs, going several decimal places because of the way some browsers may not do rounding. I'm having a hard time finding that article again but I did actually try that earlier and it didn't seem to help. I might give it another go just to be thorough. Thanks for pointing that out though. – dugost Jan 23 '15 at 04:09

2 Answers2

2

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

timar
  • 21
  • 3
0

As told by various resources (like the OP), Firefox might not apply media queries with a 1px gap due to subpixel rendering.

Furthermore, using decimal places (like 767.9px) might lead to unexpected or otherwise annoying results, due to rounding.

However, there are some syntax improvements in level 4, where we can use the Media Queries Range syntax (see spec):

@media (min-width: 30rem) and (max-width: 50rem) { /*…*/ }
/* ↑ is equivalent in level 4 to ↓ */
@media (30rem <= width <= 50rem ) { /*…*/ }

… and in the OP’s use case:

@media (480px <= width < 600px) { /* use 480.css */ }
@media (600px <= width < 768px) { /* use 600.css */ }
@media (768px <= width < 960px) { /* use 768.css */ }

The obvious advantage, besides defusing rounding issues, is less code, while using ordinary mathematical comparison operators – and no more n−1.

dakab
  • 5,379
  • 9
  • 43
  • 67