Bug 78295

Summary:

Support for CSS rem unit in Media Queries

Product:

WebKit

Reporter:

Florens Verschelde <florens>

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED DUPLICATE

Severity:

Normal

CC:

7raivis, esprehn, grayghost, hyatt, paulirish, peter, rik, webkit.review.bot

Priority:

Version:

528+ (Nightly build)

Hardware:

Mac (Intel)

OS:

OS X 10.7

URL:

http://fvsch.com/code/bugs/rem-mediaquery/

Attachments:

Description	Flags
Link to an additional page with information.	none

Florens Verschelde

Reported 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.

Attachments
Link to an additional page with information. (45 bytes, text/plain) 2012-07-27 08:29 PDT, grayghost	no flags	Details
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.

grayghost

Comment 1 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

WebKit Review Bot

Comment 2 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.

Peter Beverloo

Comment 3 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 :-).

grayghost

Comment 4 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 :-).

Elliott Sprehn

Comment 5 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?

grayghost

Comment 6 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

grayghost

Comment 7 2013-01-30 08:29:34 PST

As of 1/30/13 This bug appears to be resolved. Thanks!

Anthony Ricaud

Comment 8 2022-02-08 09:10:25 PST

Note sure this is in an exact duplicate but bug 156684 made rem media queries comply with specs. *** This bug has been marked as a duplicate of bug 156684 ***

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