[Webkit-unassigned] [Bug 284973] New: @media (prefers-color-scheme: dark) inside iframe not matching when the iframe itself style has color-scheme: dark

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=284973

            Bug ID: 284973
           Summary: @media (prefers-color-scheme: dark) inside iframe not
                    matching when the iframe itself style has
                    color-scheme: dark
           Product: WebKit
           Version: Safari 18
          Hardware: iPhone / iPad
               URL: https://wk.rt.ht/bug/iframe/prefers-color-scheme/?io
                OS: iOS 18
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: New Bugs
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: cetin.sert at gmail.com

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!

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20241219/b8f4d55c/attachment.htm>