Bug 41063 - Media query - width in 'em's doesn't work on zoom
Summary: Media query - width in 'em's doesn't work on zoom
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 528+ (Nightly build)
Hardware: PC Windows 7
: P2 Normal
Assignee: Nobody
URL: http://static.robinwinslow.co.uk/usab...
Keywords: BlinkMergeCandidate, InRadar
Depends on:
Blocks:
 
Reported: 2010-06-23 06:20 PDT by Robin
Modified: 2023-06-28 08:43 PDT (History)
25 users (show)

See Also:


Attachments
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
Test from comment 5, via archive.org (1.28 KB, text/html)
2022-04-11 04:36 PDT, Sam Sneddon [:gsnedders]
no flags Details
CSS media query matches, JS matchMedia doesn’t match (391.31 KB, image/png)
2023-06-27 12:57 PDT, Šime Vidas
no flags Details
web inspector with console result showing true (155.77 KB, image/png)
2023-06-28 01:26 PDT, Karl Dubost
no flags Details
testcase for em (514 bytes, text/html)
2023-06-28 01:26 PDT, Karl Dubost
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
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.
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.
Comment 7 Sam Sneddon [:gsnedders] 2022-04-11 04:36:05 PDT
Created attachment 457247 [details]
Test from comment 5, via archive.org
Comment 8 Radar WebKit Bug Importer 2022-04-11 04:36:46 PDT
<rdar://problem/91558676>
Comment 9 Sam Sneddon [:gsnedders] 2022-04-12 03:54:06 PDT
(In reply to John Mellor from comment #6)
> 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.

Nowadays at https://src.chromium.org/viewvc/blink?view=revision&revision=152742
Comment 10 Ahmad Saleem 2022-06-08 17:36:59 PDT
This one line patch cannot be applied to Webkit as of today due to change in code.

First change set to change to (style, rootStyle) to (conversionData) landed in 2014.

https://github.com/WebKit/WebKit/commit/7925295ae134c1bf5b28a3a8aaba5db3738ee335

It is still present on Line 504 in below:

https://github.com/WebKit/WebKit/blob/main/Source/WebCore/css/MediaQueryEvaluator.cpp#L504

but it is now changed from <int> to <double> due this commit:

https://github.com/WebKit/WebKit/commit/dad086a7dd9d4b8d46313d35e94881d4a56cf604#diff-6b2570bc01be669b55078286340c1690013a3478c6fc77253f831b23f4784d0f

If someone want to modify this and update, this is the history to apply "Blink" page unless if I missed anything and something more need to be done. Thanks!
Comment 11 Ahmad Saleem 2022-06-08 17:38:53 PDT
By the way - I am able to reproduce this bug in Safari 15.5 on macOS 12.4. All other browsers work perfectly fine. Thanks!
Comment 12 Ahmad Saleem 2022-08-29 05:43:55 PDT
I tried to do pull request as Blink in following PR but it does not compile:

https://github.com/WebKit/WebKit/pull/3734

I think it might be due to following of these but I might be completely wrong here:

https://github.com/WebKit/WebKit/blob/cbe5dfe8952e90d8b26a4ee9fc237f6dc91dfd0e/Source/WebCore/css/CSSToLengthConversionData.cpp#L84

https://github.com/WebKit/WebKit/blob/cbe5dfe8952e90d8b26a4ee9fc237f6dc91dfd0e/Source/WebCore/css/CSSToLengthConversionData.cpp#L57

or this case does not looking for zoom:

https://github.com/WebKit/WebKit/blob/cbe5dfe8952e90d8b26a4ee9fc237f6dc91dfd0e/Source/WebCore/css/CSSPrimitiveValue.cpp#L729

______

Since I am not C++ and Programming expert and was just trying. So I want to post my learnings before I close my pull request Thanks!

____

NOTE - I tried following:

return primitiveValue.computeLength<double>(conversionData.zoom());

return primitiveValue.computeLength<double>(conversionData,1,true);

return primitiveValue.computeLength<double>(conversionData, 1.0);

return primitiveValue.computeLength<double>(conversionData,1.0 /* Comment */, true /* Comment */);
Comment 13 James Craig 2023-06-27 09:40:58 PDT
There was some speculation on this W3C issue https://github.com/w3c/w3c-website/issues/389 that this was intentional, so clarifying that `em`/`rem' units do work in responsive layout sizing... 

This particular bug seems limited to Media Queries, as originally indicated in the title, and likely not intentional, despite the bug's age.
Comment 14 Šime Vidas 2023-06-27 11:12:51 PDT
Has this issue been fixed? I tested the original page (via Wayback Machine), and Safari 16.5.1 (latest version) behaves correctly.

https://web.archive.org/web/20100718091454/static.robinwinslow.co.uk/usablelayout/2-column.html
Comment 15 Ahmad Saleem 2023-06-27 11:16:05 PDT
(In reply to Šime Vidas from comment #14)
> Has this issue been fixed? I tested the original page (via Wayback Machine),
> and Safari 16.5.1 (latest version) behaves correctly.
> 
> https://web.archive.org/web/20100718091454/static.robinwinslow.co.uk/
> usablelayout/2-column.html

I am still able to reproduce this bug using test case below in STP172:

https://bug-41063-attachments.webkit.org/attachment.cgi?id=457247

Where if I do CMD+ to zoom in, it changes background to 'red' while zoomed in while it does not in other browsers.
Comment 16 Šime Vidas 2023-06-27 12:57:59 PDT
Created attachment 466834 [details]
CSS media query matches, JS matchMedia doesn’t match

Is this a bug only with the matchMedia function?

Steps to reproduce:

1. Open https://output.jsbin.com/kugeqax/quiet
2. Zoom in once
3. Observe that the background is still yellow
4. Open WebKit Inspector console and run matchMedia('(min-width: 69em)').matches

The function returns false, but the same media query in CSS still applies to the page.
Comment 17 Karl Dubost 2023-06-28 00:52:23 PDT
Šime,

I'm unable to access. It says Safari can't connect, same with Firefox. Not sure why.
https://output.jsbin.com/kugeqax/quiet

could you upload a test case here? :) Thanks.
Comment 18 Karl Dubost 2023-06-28 01:26:01 PDT
Created attachment 466840 [details]
web inspector with console result showing true

ok this is weird. 

window.matchMedia('(min-width: 69em)').matches

returns true for me on both (on macOS)

* Safari Version 16.5.1 (18615.2.9.11.7)
* Safari Technology Preview Release 172 (Safari 17.0, WebKit 18616.1.17.3)
Comment 19 Karl Dubost 2023-06-28 01:26:33 PDT
Created attachment 466841 [details]
testcase for em
Comment 20 Karl Dubost 2023-06-28 01:28:23 PDT
Ha but no.

window.matchMedia('(min-width: 69em)').matches

returns false as soon we apply the zoom. but the background is still yellow. :)
Comment 21 Karl Dubost 2023-06-28 01:35:00 PDT
OK some progress 

1. Load the testcase https://bugs.webkit.org/attachment.cgi?id=466841
2. Make the window large enough so it's yellow
3. Open the console. Type 
   window.matchMedia('(min-width: 69em)').matches
4. It returns true
5. Apply zoom (Command +)
6. Window stays yellow
7. in the console type
   window.matchMedia('(min-width: 69em)').matches
8. It returns false (depending on the initial size of the window)


Monitoring window.innerWidth values shows that the window is smaller and smaller in pixels. So the false is correct. It seems more likely that the browser has forgotten to reset the yellow background. That looks like another bug. :)
Comment 22 Karl Dubost 2023-06-28 01:38:43 PDT
Sometimes the background becomes white again on zoom and sometimes not, and stays yellow.
Comment 23 Karl Dubost 2023-06-28 01:45:50 PDT
There are also multiple reports online where people had difficulties with

    window.matchMedia('(min-width:1025px)').matches

on Safari and had to do

    window.matchMedia('screen and (min-width:1025px)').matches
Comment 25 Šime Vidas 2023-06-28 06:05:21 PDT
I’ve filed a new WebKit bug that may have a dependency relationship with this bug. Please take a look:

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