Skip to content

Commit

Permalink
Fix the iframe background color
Browse files Browse the repository at this point in the history
I think this works. Originally when I did this 8 months ago
I set the CSS a certain way that works in Chrome but not Firefox.
I filed a bug for Firefox

https://bugzilla.mozilla.org/show_bug.cgi?id=1885048

They pointed out the bug is in Chrome and Firefox is correct.
I put the CSS to match what Firefox said was correct and found
the corresponding bug in Chrome which was basically being ignored.
(I can't seem to find the bug now)

Anyway, my understanding is, since the web started, iframes content
gets the background color of the iframe element. Unless of course
they set their own background color and that, with white being the
default backgrounc color, most pages expect a white background and
so iframe elements need have a white background otherwise content
breaks.

Often colors are now set via `color-scheme` but color-scheme is
ignored in the iframe content if its the same as the iframe element's
color-scheme because otherwise the previous rule about background color
would be un-enforced.

The solution appears to be, set the iframe element's color-scheme
to "initial". Now the iframe's content color-scheme setting is not
ignored.
  • Loading branch information
greggman committed Nov 19, 2024
1 parent a1bee53 commit 8f9e6b6
Showing 1 changed file with 19 additions and 2 deletions.
21 changes: 19 additions & 2 deletions public/css/SampleLayout.css
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,26 @@
height: 100%;
border: none;
display: block;
/* should should remain white because samples in iframes expect a white background */
color-scheme: light;
/*
* iframe content inherits the background color of the iframe element
* in the parent but, the content might expect the default white background
* so we set the iframe element's background to white
*/
background-color: #fff;
/*
* further, the browser will ignore the color scheme in the iframe content
* if it matches the one in the parent iframe element. In other words
*
* * iframe element says 'color-scheme: light dark'.
* * iframe content says 'color-scheme: light dark'.
*
* result: iframe content color-scheme setting is ignored and it gets
* the background color from the iframe element in the parent.
*
* Solution: set the iframe element color-scheme to initial. Now the
* iframe content's setting will be respected.
*/
color-scheme: initial;
}

.sampleCategory {
Expand Down

0 comments on commit 8f9e6b6

Please sign in to comment.