Bug 53186 - @media queries do not take zooming into account
: @media queries do not take zooming into account
: WebKit
: 528+ (Nightly build)
: All All
: P2 Normal
Assigned To:
  Show dependency treegraph
Reported: 2011-01-26 12:28 PST by
Modified: 2013-03-14 16:24 PST (History)

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


You need to log in before you can comment on or make changes to this bug.

Description From 2011-01-26 12:28:12 PST
Created an attachment (id=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 From 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 From 2012-03-26 08:31:34 PST -------
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 From 2012-04-23 15:45:37 PST -------
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 From 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 From 2013-03-08 08:59:12 PST -------
Created an attachment (id=192234) [details]
------- Comment #6 From 2013-03-08 09:14:01 PST -------
(From update of 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 From 2013-03-08 09:16:11 PST -------
(From update of attachment 192234 [details])
I think that's what the comment says? :-).
------- Comment #8 From 2013-03-08 09:22:09 PST -------
(From update of attachment 192234 [details])
Clearing flags on attachment: 192234

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