Bug 53186

Summary: @media queries do not take zooming into account
Product: WebKit Reporter: Erik Arvidsson <arv>
Component: CSSAssignee: John Mellor <johnme>
Status: RESOLVED FIXED    
Severity: Normal CC: abarth, ac, aelias, ben, ch.martin, dcmouyard, dkaleta, eric.carlson, esprehn+autocc, feature-media-reviews, jer.noble, johnme, jstritar, kenneth, koivisto, macpherson, menard, ojan.autocc, pipo, rbyers, simon.fraser, tmpsantos, webkit.review.bot, yonathan
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: All   
OS: All   
Attachments:
Description Flags
Test case
none
Patch none

Erik Arvidsson
Reported 2011-01-26 12:28:12 PST
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.
Attachments
Test case (615 bytes, text/html)
2011-01-26 12:28 PST, Erik Arvidsson 		no flags
Details
Patch (4.96 KB, patch)
2013-03-08 08:59 PST, John Mellor 		no flags
DetailsFormatted DiffDiff
View All Add attachment proposed patch, testcase, etc.
Alastair Campbell
Comment 1 2012-01-12 01:28:14 PST
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.
Dan Mouyard
Comment 2 2012-03-26 08:31:34 PDT
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.
Yonathan Randolph
Comment 3 2012-04-23 15:45:37 PDT
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/
pipo
Comment 4 2013-02-17 03:14:05 PST
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.)
John Mellor
Comment 5 2013-03-08 08:59:12 PST
Created attachment 192234 [details] Patch
Kenneth Rohde Christiansen
Comment 6 2013-03-08 09:14:01 PST
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).
Peter Beverloo
Comment 7 2013-03-08 09:16:11 PST
Comment on attachment 192234 [details] Patch I think that's what the comment says? :-).
WebKit Review Bot
Comment 8 2013-03-08 09:22:09 PST
Comment on attachment 192234 [details] Patch Clearing flags on attachment: 192234 Committed r145233: <http://trac.webkit.org/changeset/145233>
WebKit Review Bot
Comment 9 2013-03-08 09:22:13 PST
All reviewed patches have been landed. Closing bug.
Simon Fraser (smfr)
Comment 10 2013-03-08 09:39:16 PST
Yeah, I wish this had clarified that it doesn't affect pageScale-zooming.
ben
Comment 11 2013-03-14 16:24:21 PDT
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 :)
Note You need to log in before you can comment on or make changes to this bug.