From: Mark Otto Date: Tue, 30 Jun 2026 23:20:42 +0000 (-0700) Subject: Fix iframe color-scheme behavior (#42605) X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=4a1bf18b49d8d32b45564153c048fbf4b5d0de23;p=thirdparty%2Fbootstrap.git Fix iframe color-scheme behavior (#42605) * Fix iframe color-scheme behavior * Docs: remove double blank line before iframe color-scheme section (MD012) --- diff --git a/scss/content/_reboot.scss b/scss/content/_reboot.scss index 81be6f5e04..578a88812e 100644 --- a/scss/content/_reboot.scss +++ b/scss/content/_reboot.scss @@ -69,6 +69,16 @@ $reboot-mark-tokens: defaults( } } + // Reset iframe color-scheme + // + // If the color scheme of an iframe differs from parent document, iframe gets + // an opaque canvas background appropriate (resulting in a white background + // on the iframe when in a page with a dark color scheme). + iframe { + color-scheme: light dark; + border: 0; + } + // Body // // 1. Remove the margin in all browsers. @@ -598,12 +608,6 @@ $reboot-mark-tokens: defaults( display: inline-block; } - // Remove border from iframe - - iframe { - border: 0; - } - // Summary // // 1. Add the correct display in all browsers diff --git a/site/src/content/docs/content/reboot.mdx b/site/src/content/docs/content/reboot.mdx index 8fa7d45c35..0e14c82d54 100644 --- a/site/src/content/docs/content/reboot.mdx +++ b/site/src/content/docs/content/reboot.mdx @@ -450,3 +450,12 @@ Since `[hidden]` is not compatible with jQuery’s `$(...).hide()` and `$(...).s To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]([[docsref:/utilities/visibility]]) instead. + +## iframe color-scheme + +The ` + + `} />