[Webkit-unassigned] [Bug 41063] New: Media query - width in 'em's doesn't work on zoom

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=41063

           Summary: Media query - width in 'em's doesn't work on zoom
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: PC
               URL: http://static.robinwinslow.co.uk/usablelayout/2-column
                    .html
        OS/Version: Windows 7
            Status: UNCONFIRMED
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: robin at robinwinslow.co.uk


Basic info
=====

Google Chrome Version: 5.0.375.70 (Official Build 48679)
WebKit Version:        533.4
V8:                    2.1.10.13
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

Summary
====
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:
http://static.robinwinslow.co.uk/usablelayout/2-column.html

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.

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.