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