This bug appears to have been fixed, and is in Chrome from version 27. Hopefully Safari in OSX 10.9 will have the fix to. I will leave the rest of this post here for posterity:
I’ve noticed a bug in Webkit browsers (Chrome and Safari) that impacts accessibility: Zooming in does not trigger media queries.
To show the effect, take a recent responsive design such as the Boston Globe and zoom in. In Firefox, Internet Explorer or Opera and it behaves how I expected, the media-queries trigger and the layout adapts:
However, when you try the same thing with Chrome or Safari, the zoom works (text and images get bigger), but all within the same layout:
NB: I think it is around 200% zoom, but it may be a little off.
It gets even more obvious when you scroll down, as you have huge text in narrow columns.
Accessibility
It looks like a bug, but you might be asking what effect that has on accessibility? The main impact is on people with mild to moderate visual impairment who use browser controls to increase the visibility of websites.
The browser landscape has changed a lot in the last few years, including how browsers zoom. In ye-olde days most browsers allowed you to increase the text size. Now the default method across virtually all browsers is to “zoom”, which increases the size of everything.
Zoom works well for people who need things a bit bigger unless you immediately get horizontal scrolling. That is why responsive designs (which re-flows the layout at smaller resolutions) work well for zooming, because the layout adapts to the available width.
What is a zoomed pixel?
I don’t know what the root cause is, however, from a front-end development point of view it is as though Firefox and Internet Explorer increase the effective pixel size, so when you zoom in there are less pixels in the same area. Webkit does not seem to take the same approach.
It is not event-related, as reloading the page does not trigger the media queries (except the edge-case described below). Overall it is very odd, because the reported pixel size of the window does change, at least for JavaScript (test example).
Mobile Webkit uses a different style of zooming, as when you ‘zoom in’ the window stays the same, but your view zooms in without affecting the layout. I wonder if this is a conflicting method?
Another oddity is the difference when using EMs. I created a simple test case of max-width media queries in pixels and EMs. If you zoom in so the page reports less than 500px of width, neither triggers. However, if you then refresh the page, the EM based query (only) does trigger. Bizarre, but another facet to the bug(s).
I suspect that Google is aware of some issues to do with this, otherwise you wouldn’t get a red-banner warning if you zoom in on a Google Doc:
It might not affect many people at the moment (although that is debatable), but Chrome is rapidly gathering market share, so either it will affect people or it reduces Webkit browsers usefulness on the desktop.
I’m not in the Webkit browser world, so my question is: where’s the best place to report this?
https://bugs.webkit.org/enter_bug.cgi?product=WebKit
This is not a bug. It is the logical behaviour as it should be. While zooming, you do not change your resolution or viewport size (pixel wise). I think you used resolution as trigger in your media query?
But maybe there should be another query for zooming, if there isn’t one already in the specs …
It is difficult to talk about without the terms becoming confusing, but I believe that the effective resolution (pixels across the viewport) do change.
If you look at how Gecko implemented zoom, they talk about “Logical resolution”.
IE implemented ‘adaptive’ zoom from IE8, where it tries to minimise horizontal scrolling.
In the CSS3 media-query spec for width it is described as:
If you zoom in, the display area has less pixels, therefore it should trigger.
Even if you don’t think it technically is a bug, from a user point of view it is definitely a bug!
Thanks Mathias,
From the looks of their bugzilla, someone has submitted a bug on EMs & media queries, which explains why it kinda works for EMs.
I’ve added a comment to bug 53186, fingers crossed someone notices…
Here is the bug report in chrome: http://code.google.com/p/chromium/issues/detail?id=86155
The problem stems from the fact that there should be two different zoom events.
Traditional page zoom should trigger media queries for the accessibility reasons mentioned above.
Pinch-zoom on touch devices, however, shouldn’t trigger media queries. This creates a “keyhole” effect, but it’s much easier to scroll around on a touch device.
Hi Dan,
Isn’t that the difference between page width and viewport width?
Zooming on the desktop decreases the page width, whereas zooming on mobiles does not.
I think I may have figured out a temporary fix for this. If you use ems for your media queries that is.
include a dummy style tag in the head of your document eg.
<style id="stylesTest"> </style>
And then write/update a style to it every time the window is resized – for example I did this:
jQuery(window).resize(function(){
$('#stylesTest').html('#noShow { width:' + $(window).width() + 'px }');
});
This seems to force the webkit browsers to then re-render the css – no page refresh required. Anyway it has worked for me.
Also the #noShow element doesn’t even have to be on the page
Hi Simon,
Interesting workaround, but I’d rather it was native!
There’s another bug in webkit that appears to have had some work done to make it recognise changes when the query widths are defined in EMs, so it’s possible, but should work for pixels first really.