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

• Status: RESOLVED
• Resolution: FIXED
• 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? 🙏

[Kiet Ho]

Pull request: https://github.com/WebKit/WebKit/pull/60290

[Kiet Ho]

Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/58920

[EWS]

Committed 310465@main (34fc452fa59f): <https://commits.webkit.org/310465@main>

Reviewed commits have been landed. Closing PR #60290 and removing active labels.

[Cetin Sert]

Thank you everyone!

Is this in 26.4 or a future version!?

[Kiet Ho]

This is available in STP 242 and newer, see this release note: https://developer.apple.com/documentation/safari-technology-preview-release-notes/stp-release-242

I don't know which iOS/macOS version would include this, sorry.

[Cetin Sert]

In STP Release 243 (WebKit 22625.1.15.19.1), this has improved a bit but your fix requires a reload of the host document in Safari, while other browser engines just work with host document reloads!

---

1. Open https://wk.rt.ht/bug/iframe/prefers-color-scheme/
2. Press the "Toggle iframe color-scheme" button (Firefox/Chrome/Edge → ✔️ updates; Safari → ❌ nothing happens)

---

1. Open https://wk.rt.ht/bug/iframe/prefers-color-scheme/?io
2. Press the "Toggle iframe color-scheme" button (Firefox/Chrome/Edge → ✔️ updates; Safari → ❌ nothing happens)
3. Press F5 to reload the host document too (Safari → ⚠️ updates on host document reload)
Safari → does not work)

---

Can you re-open this issue and redo your fix?

[Cetin Sert]

Reopened due to the above issue!

[Cetin Sert]

In STP Release 243 (WebKit 22625.1.15.19.1), this has improved a bit but your fix requires a reload of the host document in Safari, while other browser engines just work with host document reloads!

---

1. Open https://wk.rt.ht/bug/iframe/prefers-color-scheme/
2. Press the "Toggle iframe color-scheme" button (Firefox/Chrome/Edge → ✔️ updates; Safari → ❌ nothing happens)

---

1. Open https://wk.rt.ht/bug/iframe/prefers-color-scheme/?io
2. Press the "Toggle iframe color-scheme" button (Firefox/Chrome/Edge → ✔️ updates; Safari → ❌ nothing happens)
3. Press F5 to reload the host document too (Safari → ⚠️ updates only on host document reload)

[Cetin Sert]

In STP Release 243 (WebKit 22625.1.15.19.1), this has improved a bit but your fix requires a reload of the host document in Safari, while other browser engines just work withOUT host document reloads!

---

1. Open https://wk.rt.ht/bug/iframe/prefers-color-scheme/
2. Press the "Toggle iframe color-scheme" button (Firefox/Chrome/Edge → ✔️ updates; Safari → ❌ nothing happens)

---

1. Open https://wk.rt.ht/bug/iframe/prefers-color-scheme/?io
2. Press the "Toggle iframe color-scheme" button (Firefox/Chrome/Edge → ✔️ updates; Safari → ❌ nothing happens)
3. Press F5 to reload the host document too (Safari → ⚠️ updates only on host document reload)

[Cetin Sert]

Dynamic changes to color-scheme on the embedding iframe element do not cause prefers-color-scheme media queries in the embedded document to be re-evaluated.

[Kiet Ho]

Hello, sorry that I didn't get your subsequent comments (I didn't realize my email notification setting was disabled until very recently). I've tracked your issue in a separate bug: https://bugs.webkit.org/show_bug.cgi?id=316738. I'll put this bug back to closed.