Bug 284973
Summary: | @media (prefers-color-scheme: dark) inside iframe not matching when the iframe itself has style.colorScheme = 'dark' | ||
---|---|---|---|
Product: | WebKit | Reporter: | Cetin Sert <cetin.sert> |
Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> |
Status: | NEW | ||
Severity: | Normal | CC: | akeerthi, bfulgham, karlcow, koivisto, ntim, simon.fraser, timothy, webkit-bug-importer, zalan |
Priority: | P2 | Keywords: | InRadar |
Version: | Safari 18 | ||
Hardware: | All | ||
OS: | iOS 18 | ||
URL: | https://wk.rt.ht/bug/iframe/prefers-color-scheme/?io |
Cetin Sert
When embedding a webpage inside an <iframe> and setting the iframe’s style to color-scheme: dark, other browsers correctly treat the framed document as if it supports and prefers a dark color scheme. As a result, @media (prefers-color-scheme: dark) rules inside the iframe correctly apply. However, in Safari (WebKit), the @media (prefers-color-scheme: dark) inside the iframe does not match, despite the iframe being explicitly set to color-scheme: dark. Neither adding a <meta name=color-scheme content="dark light"> inside the iframe’s content nor other workarounds produce the expected behavior.
Interactive playground with minimal reproduction:
https://wk.rt.ht/bug/iframe/prefers-color-scheme/?io
Works in latest stable Chrome/Edge (131), Firefox (133).
Doesn't work in Safari (18.2)!
Code
<iframe style=color-scheme:dark srcdoc="
<style>
body {
font-family: system-ui;
display: grid;
place-items: center;
height: 100dvh;
margin: 0;
}
/* ↓ doesn't work in Safari */
@media (prefers-color-scheme: dark) {
body {
background: #222;
color: #fff;
}
}
</style>
<h2>I'm an iframe!</h2>
">
</iframe>
This breaks output color scheme toggling on RTCode.io and potentially other playgrounds!
Attachments | ||
---|---|---|
Add attachment proposed patch, testcase, etc. |
Aditya Keerthi
(this is because WebKit has not implemented the resolution in https://github.com/w3c/csswg-drafts/issues/7493 yet)
Cetin Sert
@Apple, see – https://github.com/w3c/csswg-drafts/issues/7493#issuecomment-1201691078
Looking forward to seeing your swift progress on this!
Radar WebKit Bug Importer
<rdar://problem/142072593>
Cetin Sert
Hope to see this in the next release!