Bug 251078

Summary: REGRESSION (STP 160): tweakers.net media queries not applied correctly
Product: WebKit Reporter: Gustaaf Groenendaal <mysteryquest+webkit>
Component: New BugsAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Normal CC: koivisto, mmaxfield, simon.fraser, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: Mac (Intel)   
OS: macOS 12   
Attachments:
Description Flags
Possible reduction with html and (responsive) css files
none
Working reduction none

Description Gustaaf Groenendaal 2023-01-24 01:56:23 PST 
Created attachment 464626 [details]
Possible reduction with html and (responsive) css files

Before testing please make sure you have a window with a horizontal resolution of at least 768px, 1280+ preferable and make sure the window's width is bigger than it's height.

As per Safari Technology Preview 160 (and 161) on Monterey (12.6.2) the site https://tweakers.net applies media queries incorrectly (you can see it in the header when comparing the site to shipping Safari at the same window resolutionnn). The media queries for < 767px are always applied for some reason.

Tweakers.net is applying stylesheets based on media-queries defined in the <link>-element in the header. Shipping Safari does load all the stylesheets even if they don't apply, but doesn't apply stylesheets that don't match the media query as in TP 160+.

I made a reduction, but that doesn't fail like Tweakers.net. So it's likely something is interfering, but I haven't found the reason yet.
Comment 1 Radar WebKit Bug Importer 2023-01-24 18:54:37 PST 
<rdar://problem/104630180>
Comment 2 Gustaaf Groenendaal 2023-01-25 05:21:00 PST 
Created attachment 464646 [details]
Working reduction

Did some digging and found the problem. There is a media query inside the linked CSS file that overwrites the file's main media query. The contents of that media query are ignored and instead the CSS below that media query is applied as if the media query inside the stylesheet is the only one.

Even though this might not be correct spec-wise, it shouldn't break applying the main media query. The media query inside the external file with a media query applied should either be discarded OR applied as a sub media query in Safari <=16.3.

I think this is broken since https://commits.webkit.org/257252@main but the original error might've been introduced earlier.
Comment 3 Antti Koivisto 2023-01-25 08:14:52 PST 
This was fixed in <https://commits.webkit.org/258732@main>

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