Bug 78295 - Support for CSS rem unit in Media Queries
: Support for CSS rem unit in Media Queries
Status: UNCONFIRMED
: WebKit
Layout and Rendering
: 528+ (Nightly build)
: Macintosh Intel Mac OS X 10.7
: P2 Normal
Assigned To:
: http://fvsch.com/code/bugs/rem-mediaq...
:
:
:
  Show dependency treegraph
 
Reported: 2012-02-09 16:50 PST by
Modified: 2013-01-30 08:29 PST (History)


Attachments
Link to an additional page with information. (45 bytes, url)
2012-07-27 08:29 PST, grayghost@grayghostvisuals.com
no flags Details


Note

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


Description From 2012-02-09 16:50:49 PST
It seems that WebKit doesn't support the rem (root em) unit in CSS Media Queries at all.
I have a simple test here: http://fvsch.com/code/bugs/rem-mediaquery/

Testing in the lastest stable versions of Chrome and Safari (OSX), the media queries never get triggered. (In other browsers they do get triggered, but the font-size declared for the root element is ignored.)

It would be nice to have support for rem in media queries in all browsers.
------- Comment #1 From 2012-07-27 08:29:31 PST -------
Created an attachment (id=154958) [details]
The REM unit does not operate correctly when placed inside a media query condition for Webkit

I have sent Dave Hyatt a message 7-26-2012 via e-mail and also have this bug listed on Bug Report #27283
------- Comment #2 From 2012-07-27 08:33:33 PST -------
Attachment 154958 [details] did not pass style-queue:

Failed to run "['Tools/Scripts/check-webkit-style', '--diff-files']" exit_code: 1
Total errors found: 0 in 0 files


If any of these errors are false positives, please file a bug against check-webkit-style.
------- Comment #3 From 2012-07-27 08:37:11 PST -------
(From update of attachment 154958 [details])
Your URL is not a patch, nor has to be committed to the WebKit codebase :-).
------- Comment #4 From 2012-07-27 08:41:46 PST -------
Thanks Peter and Sorry about that confusion. 

Everything in regards to the UI and way finding here is somewhat under par to say the least. Attention to typography would be a wonderful addition for the bug tracker site FWIW ;)

(In reply to comment #3)
> (From update of attachment 154958 [details] [details])
> Your URL is not a patch, nor has to be committed to the WebKit codebase :-).
------- Comment #5 From 2012-11-02 10:40:41 PST -------
I just tested the linked case and we do change the background color as it describes. Our behavior is different than Opera and Firefox though. We change the background color immediately when you hit the colored bar, they don't seem to change it until much more of the bar is hidden outside the window.

@grayghost Can you clarify what we're supposed to be seeing here? Is this bug fixed now?
------- Comment #6 From 2012-11-02 11:01:45 PST -------
(In reply to comment #5)
> I just tested the linked case and we do change the background color as it describes. Our behavior is different than Opera and Firefox though. We change the background color immediately when you hit the colored bar, they don't seem to change it until much more of the bar is hidden outside the window.
> 
> @grayghost Can you clarify what we're supposed to be seeing here? Is this bug fixed now?

@Elliott Sprehn
The rem unit does not function inside a @media query condition (i.e. the parenthesis) 
ex.) @media only all and (min-width: 50rem) {...} 

Here is the example I prepared to see it in action.
Demo: http://codepen.io/grayghostvisuals/full/AFjDK
------- Comment #7 From 2013-01-30 08:29:34 PST -------
As of 1/30/13 This bug appears to be resolved. Thanks!