Media queries, viewport width, scrollbars, and WebKit browsers

When fine-tuning some media queries I noticed that layout changes seemed to happen at different window widths in Safari than in Firefox or Opera. When making the browser window narrower, media queries that specify a max-width kicked in a bit earlier in Safari.

The difference seemed to be around 15 pixels, so I thought it might be related to the vertical scrollbar. After reading the section about width in the Media Queries specification, I think Safari (and the other WebKit browsers I have tested in) are not following the spec, while Firefox and Opera are.

Here is the relevant wording (emphasis mine):

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

The width should include the vertical scrollbar. Safari does not. Arguably the WebKit behaviour is better for web developers in a sense, since scrollbar width is not exactly the same across browsers and platforms. I made a viewport width test page so you can try it yourself.

Either way, just a heads up that browser behaviour is inconsistent on this point. In many cases it doesn’t matter a whole lot, but it can be annoying if you want pixel-precision control of when layout changes occur.

Posted on January 18, 2011 in CSS, Browsers