Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Chrome is forcing a white background on iframe when the parent page has dark color-scheme meta

See original GitHub issue

I have been using giscus for over a year. Recently I noticed that the iframe of giscus has a white background when I use the dark theme on my page.

Then I found there is no problem when the parent page is in light theme. So I think this problem come from iframe. After search I found the discussion: https://stackoverflow.com/questions/69591128/chrome-is-forcing-a-white-background-on-frames-only-on-some-websites

The problem is that parent page in dark theme has the following meta while giscus’ iframe doesn’t have:

<head>
  <meta name="color-scheme" content="dark" />
  <!-- ... -->
</head>

I use "dark" to make the browser’s style in the dark theme. When the content is "light" ~~or "light dark"~~, there is no problem.

I noticed that giscus has set color-scheme to normal (Fix transparent background #176), which is the same solution as one of the answers to the stackoverflow discussion.

The answer provided a demo page, but it doesn’t seem to be able to fix the problem properly.

The answer:

What I see:

At last, I temporarily fixed the problem with the following style, which behaves as I expected, no more white background, both of light and dark color scheme on the parent page works correctly:

#giscus::part(iframe) {
  color-scheme: light;
}

But I still don’t fully understand why it works.

Other reference articles I found: https://fvsch.com/transparent-iframes

Issue Analytics

State:
Created a year ago
Reactions:1
Comments:7 (3 by maintainers)

Top GitHub Comments

2reactions

laymonagecommented, Nov 6, 2022

Okay, should be fixed now…

0reactions

laymonagecommented, Nov 6, 2022

Argh, yeah, just noticed that. Seems that Chrome will always force a white background if the color-scheme isn’t set to light. I’ve reverted the changes and used color-scheme: light instead of color-scheme: normal.