When using a style container query on a body tag the styles don't get applied. This does work in Chrome. Reproduction: ``` <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Webkit bugs: styled container queries</title> </head> <body> <style> html { height: 100vh; --dark-mode: true; } @container style(--dark-mode: true) { body { background-color: black; } } </style> </body> </html> ``` Another reproduction is here: https://tegenlicht-frontend.vpro-prod.apps.vpro.cluster.chp4.io/programmas/tegenlicht/site/link-in-bio
Created attachment 470412 [details] rendering in safari, firefox, chrome This is showing black only in chrome at the moment.
<rdar://problem/124875999>
(In reply to Karl Dubost from comment #1) > Created attachment 470412 [details] > rendering in safari, firefox, chrome > > This is showing black only in chrome at the moment. Yes that is right. I believe Firefox doesn't support styled container queries yet, so it is expected that it shows a white screen there.