The above image uses a stylesheet with this media query
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.