From 8f9e6b6ef5b1872829e246910fff3cccedadf2f5 Mon Sep 17 00:00:00 2001
From: Gregg Tavares <github@greggman.com>
Date: Fri, 15 Nov 2024 09:12:34 -0800
Subject: [PATCH] Fix the iframe background color

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.
---
 public/css/SampleLayout.css | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/public/css/SampleLayout.css b/public/css/SampleLayout.css
index fff6e564..0b001b36 100644
--- a/public/css/SampleLayout.css
+++ b/public/css/SampleLayout.css
@@ -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 {