Bug 292247

Summary: Container Style Query in combination with ::slotted(*) crashes Safari
Product: WebKit Reporter: marcnetic
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED FIXED    
Severity: Major CC: ap, koivisto, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 18   
Hardware: Unspecified   
OS: Unspecified   
URL: https://codepen.io/marcnetic/pen/jEEBMBz
See Also: https://bugs.webkit.org/show_bug.cgi?id=281131
Attachments:
Description Flags
Video Shows how Safari Crash
none
same test as attachment
none
logs/com.apple.WebKit.WebContent none

marcnetic
Reported 2025-04-29 01:17:00 PDT
Created attachment 475072 [details] Video Shows how Safari Crash If I change a CSS Variable for example by a media query in light dom, use Web Components, `::slotted(*)` within the Styles and reacting to that CSS Variable by Container Style Query, Safari Crash on Resizing. ``` .author::slotted(*) { ... } @container style(--is-loud: true) { .author::slotted(*) { ... } } ``` Without `::slotted(*)` or without `@container style` Safari did not crash. Try in Safari and Resize: https://cdpn.io/pen/debug/jEEBMBz?authentication_hash=vWARwpyayLGk The Code: https://codepen.io/marcnetic/pen/jEEBMBz
Attachments
Video Shows how Safari Crash (2.62 MB, video/quicktime)
2025-04-29 01:17 PDT, marcnetic 		no flags
Details
same test as attachment (1.31 KB, text/html)
2025-04-29 08:54 PDT, Alexey Proskuryakov 		no flags
Details
logs/com.apple.WebKit.WebContent (37.42 KB, text/plain)
2025-04-29 23:11 PDT, marcnetic 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
marcnetic
Comment 1 2025-04-29 06:02:04 PDT
Could be the same as here: https://bugs.webkit.org/show_bug.cgi?id=289868
Alexey Proskuryakov
Comment 2 2025-04-29 08:53:45 PDT
Thank you for the report! I cannot reproduce this issue. Could you please attach the crash log? The first link shows that debug view is expired, but I saved the test (with CSS and JS) into a local file, and resizing the window doesn't cause a crash.
Alexey Proskuryakov
Comment 3 2025-04-29 08:54:07 PDT
Created attachment 475076 [details] same test as attachment
marcnetic
Comment 4 2025-04-29 09:04:25 PDT
You have to Resize the window smaller than 800px, so that the CSS Variable change and both custom-elements has a yellow background. After you change the window back to over 800px the error occurred - as in the video shown. It seems that the Bug is similar to this Bug: https://bugs.webkit.org/show_bug.cgi?id=289868. If I change the CSS Variable in the Example (https://lit.dev/playground/#gist=52e97d65f0fe1c7d87a5eba2b249ea39) more times by pressing the Button, the same error occurred as on mine example on resize.
Alexey Proskuryakov
Comment 5 2025-04-29 09:25:29 PDT
I watched the video, and did resize the window to all kinds of sizes, and there was no crash. I suspect that you may be using an old version, and the bug is already fixed, but one way or another, please attach the crash log.
marcnetic
Comment 6 2025-04-29 23:11:28 PDT
Created attachment 475088 [details] logs/com.apple.WebKit.WebContent The Diagnostic Report from the Website Crash. I use Safari 18.3.1 on MacOS 15.3.2
Alexey Proskuryakov
Comment 7 2025-04-30 10:19:16 PDT
This crash log matches the one in bug 281131. Could you please try with macOS 18.4.1? I don't see any specific fix, but given that this doesn't reproduce for me, chances are that some change fixed this between 15.3.2 and 15.4.1.
Radar WebKit Bug Importer
Comment 8 2025-05-06 01:17:24 PDT
<rdar://problem/150745735>
marcnetic
Comment 9 2025-05-11 09:38:24 PDT
In macOS 18.4.1 it doesn't crash anymore. Thanks for Solving the Bug.
Note You need to log in before you can comment on or make changes to this bug.