Bug 53186 - @media queries do not take zooming into account
Summary: @media queries do not take zooming into account
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: John Mellor
Depends on:
Reported: 2011-01-26 12:28 PST by Erik Arvidsson
Modified: 2013-03-14 16:24 PDT (History)
24 users (show)

See Also:

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 Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Erik Arvidsson 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.
Comment 1 Alastair Campbell 2012-01-12 01:28:14 PST
I've noted this to, writing it up here:

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:

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.
Comment 2 Dan Mouyard 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.
Comment 3 Yonathan Randolph 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).
Comment 4 pipo 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.)
Comment 5 John Mellor 2013-03-08 08:59:12 PST
Created attachment 192234 [details]
Comment 6 Kenneth Rohde Christiansen 2013-03-08 09:14:01 PST
Comment on attachment 192234 [details]

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 7 Peter Beverloo 2013-03-08 09:16:11 PST
Comment on attachment 192234 [details]

I think that's what the comment says? :-).
Comment 8 WebKit Review Bot 2013-03-08 09:22:09 PST
Comment on attachment 192234 [details]

Clearing flags on attachment: 192234

Committed r145233: <http://trac.webkit.org/changeset/145233>
Comment 9 WebKit Review Bot 2013-03-08 09:22:13 PST
All reviewed patches have been landed.  Closing bug.
Comment 10 Simon Fraser (smfr) 2013-03-08 09:39:16 PST
Yeah, I wish this had clarified that it doesn't affect pageScale-zooming.
Comment 11 ben 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 :)