Bug 78295 - Support for CSS rem unit in Media Queries
: Support for CSS rem unit in Media Queries
Status: UNCONFIRMED
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering
: 528+ (Nightly build)
: Macintosh Intel Mac OS X 10.7
: P2 Normal
Assigned To: Nobody
http://fvsch.com/code/bugs/rem-mediaq...
:
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2012-02-09 16:50 PST by fvsch
Modified: 2014-06-16 12:55 PDT (History)
8 users (show)

See Also:


Attachments
Link to an additional page with information. (45 bytes, text/plain)
2012-07-27 08:29 PDT, grayghost
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description fvsch 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 grayghost 2012-07-27 08:29:31 PDT
Created attachment 154958 [details]
Link to an additional page with information.

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 WebKit Review Bot 2012-07-27 08:33:33 PDT
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 Peter Beverloo 2012-07-27 08:37:11 PDT
Comment on attachment 154958 [details]
Link to an additional page with information.

Your URL is not a patch, nor has to be committed to the WebKit codebase :-).
Comment 4 grayghost 2012-07-27 08:41:46 PDT
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])
> Your URL is not a patch, nor has to be committed to the WebKit codebase :-).
Comment 5 Elliott Sprehn 2012-11-02 10:40:41 PDT
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 grayghost 2012-11-02 11:01:45 PDT
(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 grayghost 2013-01-30 08:29:34 PST
As of 1/30/13 This bug appears to be resolved. Thanks!