Bug 251078 - REGRESSION (STP 160): tweakers.net media queries not applied correctly
Summary: REGRESSION (STP 160): tweakers.net media queries not applied correctly
Status: RESOLVED DUPLICATE of bug 250293
Alias: None
Product: WebKit
Classification: Unclassified
Component: New Bugs (show other bugs)
Version: Safari Technology Preview
Hardware: Mac (Intel) macOS 12
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2023-01-24 01:56 PST by Gustaaf Groenendaal
Modified: 2023-01-25 08:14 PST (History)
4 users (show)

See Also:


Attachments
Possible reduction with html and (responsive) css files (3.85 KB, application/zip)
2023-01-24 01:56 PST, Gustaaf Groenendaal
no flags Details
Working reduction (4.02 KB, application/zip)
2023-01-25 05:21 PST, Gustaaf Groenendaal
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
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 ***