[Webkit-unassigned] [Bug 220367] New: WKWebView in a fullscreen Quick Look preview fail the CSS media query prefers-color-scheme for root var

[bugzilla-daemon at webkit.org]

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

            Bug ID: 220367
           Summary: WKWebView in a fullscreen Quick Look preview fail the
                    CSS media query prefers-color-scheme for root var
           Product: WebKit
           Version: Safari 14
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: WebKit2
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: sbarex at gmail.com

I have a WKWebView inside a Quick Look preview appex on Big Sur.
I customize the html with a CSS that define the colors with :root vars. A media query for dark color scheme is used to override the var defined for the light appearance:


<style type="text/css">
:root {
  --backgroundColor: #eeeeee;
  --textColor: #333333;
}
.myclass {
    color: blue;
}
@media (prefers-color-scheme: dark) {
    :root {
        /* BUG: in light mode and fullscreen preview these vars are used overriding the light theme. */
        --backgroundColor: #333333;
        --textColor: #eeeeee;
        --linkColor: #3366ff;
    }

    .myclass {
        /* In in light mode and fullscreen preview these class is not overrided by dark scheme. */
        color: yellow;
    }
}


body {
  color: var(--textColor);
  background-color: var(--backgroundColor);
}

</style>

The style works well on the Quick Look preview. But if macOS is in light mode and I maximize the QL Preview to fullscreen, the webview uses the vars defined for the dark appearance.

This bug occurs only for properties defined with vars. The other css classes is not affected.

I have created a demo code here:
https://github.com/sbarex/QLTest

-- 
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/20210106/6cce5716/attachment-0001.htm>