Created attachment 80223 [details] Test case Given a media query like this: @media (max-width: 940px) { ... } the length value does not take zooming into account which leads to wrong layout.
I've noted this to, writing it up here: http://alastairc.ac/2012/01/zooming-bug-in-webkit/ When zooming on a site using media queries (e.g. bostonglobe.com) does not behave as expected, as the media queries do not trigger. The simple test case I used to compare is here: http://alastairc.ac/testing/media-query-width.html I suspect it overlaps with these bugs as well though: #61970 and #41063 I would also add that this is an accessibility issue, as people with mild to moderate visual impairments will be more negatively affected by this.
I think there needs to be two separate zoom events. The traditional page zoom event should trigger media queries. The pinch-zoom event on touch devices, however, shouldn't trigger media queries.
This is also filed with Chromium at http://code.google.com/p/chromium/issues/detail?id=86155 You can use this jsfiddle to compare the viewport width according to media query against CSS pixels (they should be equal). http://fiddle.jshell.net/yonran/FnkCE/show/light/
Please fix this bug. This bugs prevents developers to use proportional media queries, which would be a great enhancement for responsive web designs. For proportional media queries see: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/. The bug can be tested on this site, too. The problem occurs in Chrome 24.0.1312.57 and Safari 6.0.2 (8536.26.17). (Firefox works fine.)
Created attachment 192234 [details] Patch
Comment on attachment 192234 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=192234&action=review > Source/WebCore/ChangeLog:11 > + Fixes @media width and height to take into account full page zoom, by > + adding code to MediaQueryEvaluator's width/heightMediaFeatureEval, > + corresponding to the existing code in Element::clientWidth which makes > + document.documentElement.clientWidth take into account page zoom. OK, so this is only full page zoom, and thus not scaling (pinch zoom).
Comment on attachment 192234 [details] Patch I think that's what the comment says? :-).
Comment on attachment 192234 [details] Patch Clearing flags on attachment: 192234 Committed r145233: <http://trac.webkit.org/changeset/145233>
All reviewed patches have been landed. Closing bug.
Yeah, I wish this had clarified that it doesn't affect pageScale-zooming.
Sorry to pollute the thread but just wanted to say massive kudos to John for addressing this. This bug has been driving responsive design geeks batty for ages :)