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.