Bug 250820

Summary: [MQ4] (regression) nested media query failure
Product: WebKit Reporter: Philippe Wittenbergh <phiw2>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Normal CC: karlcow, koivisto, m_dubet
Priority: P2 Keywords: BrowserCompat
Version: Safari Technology Preview   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
test case none

Description Philippe Wittenbergh 2023-01-18 19:16:37 PST
Created attachment 464550 [details]
test case

A nested media query (MQ) prematurely closes the parent MQ, causing subsequent styles to be wrongly applied.

example:<style>
body { background: green; color: white }

@media screen and (min-width:10000px){
  body { border: 2px solid yellow;}
  @media screen { /* any MQ will do */
    .class { font-size: 2em;}
  }
  body { background: red;}
</style>

In Safari TP the background is red instead of green. Safari 16.2, Firefox and Blink all are correct.

I think this started with Safari TP 160.
Comment 1 Antti Koivisto 2023-01-18 23:35:58 PST
This was fixed in <https://commits.webkit.org/258732@main>

*** This bug has been marked as a duplicate of bug 250293 ***