Bug 248940

Summary: Inline SVG not invalidating in reaction to orientation media query
Product: WebKit Reporter: Jake Archibald <jaffathecake>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: bfulgham, karlcow, koivisto, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari Technology Preview   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
Video demonstrating issue none

Description Jake Archibald 2022-12-08 03:12:11 PST 
Created attachment 463936 [details]
Video demonstrating issue

https://static-misc-3.glitch.me/safari-cq-bug/

The gradient area has a container query which changes on 'orientation'. However, in Safari, only some of the elements seem to react to it. Notably, the inline SVG group doesn't appear to react. Refreshing the page gives the correct rendering.

Compare to Chrome which correctly reacts during resize.

See the attached video of the issue.

Apologies, the test case isn't fully reduced, but it's relatively simple.
Comment 1 Karl Dubost 2022-12-11 19:35:15 PST 
I wonder if it's not related to Container Queries, but just to orientation changes.
Comment 2 Jake Archibald 2022-12-11 23:56:03 PST 
Ah, yes. Here's an example that just uses plain media queries http://static-misc-3.glitch.me/safari-cq-bug/mqs.html. It has the same bug.
Comment 3 Jake Archibald 2022-12-12 00:00:17 PST 
Unsurprisingly (since I guess it's the same code path), the same bug exists with aspect-ratio http://static-misc-3.glitch.me/safari-cq-bug/ar.html
Comment 4 Radar WebKit Bug Importer 2022-12-15 03:13:16 PST 
<rdar://problem/103396113>