Summary: | SVG images don't support prefers-color-scheme adjustments when embedded in a page | ||||||
---|---|---|---|---|---|---|---|
Product: | WebKit | Reporter: | Justin Williams <justinw> | ||||
Component: | SVG | Assignee: | Nobody <webkit-unassigned> | ||||
Status: | NEW --- | ||||||
Severity: | Normal | CC: | alexphilin, dean_johnson, eoconnor, evan.exe, gman, hello, hu.wang, mambolouis, me, noahbeckman07, papajuliettcharlie, phil, roy, sabouhallawa, samuel, simon.fraser, timothy, webkit-bug-importer, webkit, zalan, zimmermann | ||||
Priority: | P2 | Keywords: | BrowserCompat, InRadar | ||||
Version: | Safari Technology Preview | ||||||
Hardware: | All | ||||||
OS: | macOS 10.14 | ||||||
URL: | https://carpeaqua.com | ||||||
Attachments: |
|
Description
Justin Williams
2019-06-23 09:53:15 PDT
Here is a CodeSandbox demonstrating the issue, along with a table of observed behaviour across browsers: https://codesandbox.io/s/svg-prefers-color-scheme-media-query-test-7jzlp Newer Chromium based browsers don’t have this issue (Chrome and Edge v80). Firefox v70.0.1 is ok, although the page must be refreshed after changing the OS color scheme. It would be extremely useful to be able to use the @media (prefers-color-scheme: dark) media query within SVG files, so that graphics such as logos can adapt themselves for light or dark mode. This issue is open since a year now and there is no update. You can see the bug is still happening here: https://codepen.io/Mamboleoo/pen/XWXYNNL When opening the SVG file, you get a different color scheme than checking the CodePen page. As mention before, the media-query is really helpful to handle light/dark icons on our websites. Same issue for me. As mention before, the media-query is really helpful to handle light/dark icons on our websites. Any update on this issue? Any update on this issue? Please! I am also having this problem. You can trivially compare the following page in Safari and Chrome/Firefox, etc. https://github.com/socketry/async On Safari, the logo currently has black text and a black border. On Chrome, it has white text and a light coloured border. It actually works if you use the `<object>` tag to embed it. But this is cumbersome to use in practice, and impossible to change for GitHub's rendering of the markdown -> HTML. Similar issue for me. In my case, I embed the SVGs as data URLs in the CSS. Works perfectly in Firefox/Chrome just not in Safari. I'd be nice if this was fixed. For example the github repo of the WebGPU spec which Apple is participating in looks like this in Firefox, https://imgur.com/ZpPFGBN This in Chrome https://imgur.com/wEUjG71 And this in Safari https://imgur.com/9s51nNg This is being discussed at https://github.com/w3c/csswg-drafts/issues/7213 In the meantime a solution has been provided at https://github.com/w3c/csswg-drafts/issues/7213 When will this make it into webkit? |