Bug 41063 - Media query - width in 'em's doesn't work on zoom
: Media query - width in 'em's doesn't work on zoom
Status: NEW
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering
: 528+ (Nightly build)
: PC Windows 7
: P2 Normal
Assigned To: Nobody
: BlinkMergeCandidate
Depends on:
  Show dependency treegraph
Reported: 2010-06-23 06:20 PDT by Robin
Modified: 2013-06-25 00:26 PDT (History)
10 users (show)

See Also:

This is what it should not do (68.16 KB, image/jpeg)
2010-06-23 06:24 PDT, Robin
no flags Details
This is what it should do (107.47 KB, image/jpeg)
2010-06-23 06:24 PDT, Robin
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Robin 2010-06-23 06:20:36 PDT
Basic info

Google Chrome Version: 5.0.375.70 (Official Build 48679)
WebKit Version:        533.4
URLs (if applicable):  http://static.robinwinslow.co.uk/usablelayout/2-column.html

Other browsers tested: 
  Add OK or FAIL after other browsers where you have tested this issue:
     Safari 4: FAIL
  Firefox 3.x: OK
         IE 7: FAIL
         IE 8: FAIL

Media queries (http://bit.ly/6LggD7) should allow me to apply CSS based on the width in 'em's of the page. This works, except if I zoom in to the web page. This should increase the size of 'em' as the text size increases, and the media query should therefore be applied when I reach a certain level of zoom. However, this doesn't happen.

This is likely to be a Webkit issue rather than a Chromium one...

What steps will reproduce the problem?
1. Visit this page:

Note that the page contains the following media query:

        @media all and (max-width: 52em) {
            section#main {float: none;}
            aside#postblock {
                float: none;
                width: auto;

2. First watch the functionality work correctly (in Fx, Safari or Chrome) by resizing the browser to less then 52ems - notice how when the right-hand sections "Account" and "Related articles" drop below the main content, the extra CSS is applied to make them expand to the same width as the content.
3. Now make the browser full size again, and zoom in until the two right hand sections drop below the main content. Notice, however, that the extra CSS hasn't been applied. Obviously because the browser hasn't expanded the 'em' as it should have to cause the media query to evaluate properly.

What is the expected result?
When I zoom in until the right hand sections drop below the content, the extra CSS should be applied to make those sections expand to the same width as the content.

What happens instead?
The extra CSS isn't applied, and the sections don't expand as desired.
Comment 1 Robin 2010-06-23 06:24:11 PDT
Created attachment 59507 [details]
This is what it should not do

Screen shot from Chrome after I zoomed in and it didn't behave correctly.
Comment 2 Robin 2010-06-23 06:24:56 PDT
Created attachment 59508 [details]
This is what it should do

Screen shot from Chrome after I resized the browser to produce the correct functionality
Comment 3 Robin 2010-06-23 06:26:47 PDT
By the way, to see the correct functionality on zoom, check it out in Firefox.
Comment 4 pipo 2013-02-05 05:57:47 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.)

It would be awesome to use proportional media queries probably. Thank you.
Comment 5 John Mellor 2013-05-24 12:10:13 PDT
I can confirm that the width in em exposed to media queries is calculated incorrectly when full page zoom is active.

Go to the test page - http://jsbin.com/ubuvay/4 - and zoom in/out with Ctrl+/-.

See also bug 53186.
Comment 6 John Mellor 2013-06-21 13:19:47 PDT
This has been fixed in Blink: http://crbug.com/245449
Patch available at: http://crrev.com/15841015/
It's only a one-line change (plus test), so should be easy to merge.