284973 2024-12-19 13:37:57 -0800 @media (prefers-color-scheme: dark) inside iframe not matching when the iframe itself has style.colorScheme = 'dark' 2026-05-09 18:52:14 -0700 1 1 1 Unclassified WebKit Layout and Rendering Safari Technology Preview All iOS 26 REOPENED https://bugs.webkit.org/show_bug.cgi?id=309611 https://github.com/web-platform-tests/wpt/pull/58920 https://bugs.webkit.org/show_bug.cgi?id=311766 https://bugs.webkit.org/show_bug.cgi?id=311812 https://wk.rt.ht/bug/iframe/prefers-color-scheme/?io InRadar P2 Normal --- 1 cetin.sert kiet.ho akeerthi bfulgham cetin.sert jacob karlcow koivisto ntim rajsite simon.fraser timothy webkit-bug-importer zalan oldest_to_newest 2083099 0 cetin.sert 2024-12-19 13:37:57 -0800 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! 2083683 1 akeerthi 2024-12-23 13:44:40 -0800 (this is because WebKit has not implemented the resolution in https://github.com/w3c/csswg-drafts/issues/7493 yet) 2083758 2 cetin.sert 2024-12-23 22:52:09 -0800 @Apple, see – https://github.com/w3c/csswg-drafts/issues/7493#issuecomment-1201691078 Looking forward to seeing your swift progress on this! 2084000 3 webkit-bug-importer 2024-12-26 13:38:14 -0800 <rdar://problem/142072593> 2100137 4 cetin.sert 2025-03-03 19:13:52 -0800 Hope to see this in the next release! 2135041 5 jacob 2025-08-07 16:04:45 -0700 Just ran into this as well. Would love to see this fixed – any update yet? 🙏 2188795 6 kiet.ho 2026-03-10 12:41:46 -0700 Pull request: https://github.com/WebKit/WebKit/pull/60290 2195991 7 kiet.ho 2026-04-01 13:48:28 -0700 Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/58920 2196370 8 ews-feeder 2026-04-02 13:47:49 -0700 Committed 310465@main (34fc452fa59f): <https://commits.webkit.org/310465@main> Reviewed commits have been landed. Closing PR #60290 and removing active labels. 2209361 9 cetin.sert 2026-05-09 11:13:56 -0700 Thank you everyone! Is this in 26.4 or a future version!? 2209365 10 kiet.ho 2026-05-09 11:32:18 -0700 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. 2209397 11 cetin.sert 2026-05-09 16:10:25 -0700 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? 2209398 12 cetin.sert 2026-05-09 16:11:46 -0700 Reopened due to the above issue! 2209399 13 cetin.sert 2026-05-09 16:13:21 -0700 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) 2209400 14 cetin.sert 2026-05-09 16:33:34 -0700 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) 2209423 15 cetin.sert 2026-05-09 18:52:14 -0700 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.