Bug 284973 – @media (prefers-color-scheme: dark) inside iframe not matching when the iframe itself has style.colorScheme = 'dark'

• Status: NEW
• Component: Layout and Rendering

[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!

[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!

[Jacob Bandes-Storch]

Just ran into this as well. Would love to see this fixed – any update yet? 🙏