Same iframe, two outcomes — color-scheme mismatch demo

This page sets color-scheme: dark on the <html> element. Both iframes below load the exact same document with a transparent body. Only the right one tells the browser color-scheme: light. Watch what Chrome does to the left one.

parent html { color-scheme: dark }

Broken

opaque white Canvas behind your transparent body

<!-- parent has color-scheme: dark -->
<iframe src="child.html"></iframe>

Fixed

transparent — composites cleanly over the dark host

<!-- same child.html, same transparent body -->
<iframe src="child.html"
        style="color-scheme: light; background: transparent;"></iframe>

What you're seeing

color-scheme does not propagate across iframe document boundaries. The iframe document defaults to normal (light). When the parent is dark and the iframe is light, Chrome treats it as a mismatch and substitutes an opaque Canvas color (white) on the iframe element itself, before your body renders.

Setting color-scheme: light on the iframe element tells the browser explicitly what the inner document expects, so no mismatch is detected and the transparent body composites onto whatever is behind the iframe in the parent layer.

Click Toggle parent to light above and watch both iframes blend in — that's why this bug is invisible to teams whose dev environments are light-themed.