Abnormal media query handling in Fire Fox

As of CSS 2.1 you can target your css at specific media conditions, but Firefox seems to handle them strangely. It includes the visible vertical scroll bar in the calculation of the width instead of the actual display width itself. This means that while javascript may return one value for screen width your media queries will receive a different value.

The above image uses a stylesheet with this media query

When javascript returns a window width of 890 the media query receives a value of somewhere around 907, and the styles aren’t applied until the window width is actually 873

Firefox is actually following the W3C specification for CSS2.1 when it does this.

The ‘width’ media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport (as described by CSS2, section 9.1.1 [CSS21]) including the size of a rendered scroll bar (if any).

This seems like a strange way to handle a query for the window’s display width since to me the scroll bar is not part of the display area. It also makes it harder for designers/developers because scrolbars are sized inconsistantly across operating systems. There is a difference in how this works between my Macbook and my windows desktop. The action that makes more sense to me is how webkit browsers handle this. @media receives the visible with of the browser excluding the scroll bar making things consistent.

There is another odity in Firefox’s handling of width values in @media. On some pages it seems to function like webkit where it renders using the visible content area without the scroll bar. I created some simple test file with this css one file includes it inline and one links to it.

And things function as expected. The media queries are passed the width of the visible screen.

Granted the two sites are very different but so is the behavior.