New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 621502 link

Starred by 1 user

Issue metadata

Status: Fixed
Owner:
NOT IN USE
Closed: Jun 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Bug



Sign in to add a comment

Media queries inside feature queries are not evaulated on window resize

Reported by bjorklun...@gmail.com, Jun 20 2016

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36

Example URL:
http://jsbin.com/gizoyep/3/edit?html,output

Steps to reproduce the problem:
1. Visit JSBin example at http://jsbin.com/gizoyep/3/edit?html,output
2. Resize the window from less than 1000px to over 1000px

What is the expected behavior?
One of the items should turn red

What went wrong?
The item stays black, unless the browser is refreshed

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? N/A 

Chrome version: 51.0.2704.103  Channel: stable
OS Version: OS X 10.11.5
Flash Version: Shockwave Flash 22.0 r0

Going the other way around – nesting @supports statements inside @media queries – works fine. (see http://jsbin.com/gizoyep/2/edit?html,output)

However, it may be the case that sites wishing to implement a more advanced design need different media query measurements compared to the ones shown in older browsers.

I came across this bug when working on a Grid Layout page, for example. Since grid radically alters how we work with design, I predict it will be a common occurrence to wrap a section of CSS inside of an @supports rule where the design is enhanced, with or without one or more media queries. Not having to do so risks forcing a much more repetitive and cumbersome code structure.
 
Components: -Blink Blink>CSS
Labels: -OS-Mac Hotlist-Interop
Status: Untriaged (was: Unconfirmed)

Comment 3 by r...@opera.com, Jun 21 2016

Labels: OS-All
Status: Available (was: Untriaged)
We only setHasMediaQueries for StyleSheetContents for adding rules on the top level.

Comment 4 by r...@opera.com, Jun 21 2016

Owner: r...@opera.com
Status: Started (was: Available)
Project Member

Comment 6 by bugdroid1@chromium.org, Jun 29 2016

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/feb31417375d9bd2cc2f383516c0485dc615286d

commit feb31417375d9bd2cc2f383516c0485dc615286d
Author: rune <rune@opera.com>
Date: Wed Jun 29 10:09:25 2016

Mark stylesheet as having media queries at consume time.

Marking the stylesheet as having media queries for @media at insertion
time meant we didn't mark the stylesheet when @media was a child rule
of another @-rule like @supports. Instead do the marking from the
consume method like we already did for @font-face rules.

Removed unnecessary marking from insertion methods and an unnecessary
boolean parameter which was always true.

R=timloh@chromium.org
BUG= 621502 

Review-Url: https://codereview.chromium.org/2081893003
Cr-Commit-Position: refs/heads/master@{#402766}

[add] https://crrev.com/feb31417375d9bd2cc2f383516c0485dc615286d/third_party/WebKit/LayoutTests/fast/css/media-query-in-supports-dynamic.html
[modify] https://crrev.com/feb31417375d9bd2cc2f383516c0485dc615286d/third_party/WebKit/Source/core/css/StyleSheetContents.cpp
[modify] https://crrev.com/feb31417375d9bd2cc2f383516c0485dc615286d/third_party/WebKit/Source/core/css/StyleSheetContents.h
[modify] https://crrev.com/feb31417375d9bd2cc2f383516c0485dc615286d/third_party/WebKit/Source/core/css/StyleSheetContentsTest.cpp
[modify] https://crrev.com/feb31417375d9bd2cc2f383516c0485dc615286d/third_party/WebKit/Source/core/css/parser/CSSParserImpl.cpp

Comment 7 by r...@opera.com, Jun 29 2016

Status: Fixed (was: Started)
Cc: nyerramilli@chromium.org
Labels: TE-Verified-53.0.2785.8 TE-Verified-M53
Tested the issue on Win7, Mac OS X 10.11.5, Ubuntu 14.04 using Chrome Dev 53.0.2785.8 (Official Build) dev (64-bit)

Item2 turned red for over 1000px, adding TE-Verified labels.

attached screencast for reference.
621502.mov
10.8 MB Download

Sign in to add a comment