iframe - Chrome 仅在某些网站上强制在框架上使用白色背景

Question

我正在构建一个注入(inject)本地页面的 Web 扩展程序，但我遇到了一个奇怪的 Chrome 限制 在某些网站上 :我无法将 iframe 设置为透明:

在 GitHub.com(登录后)或 Google 上试试这个:

document.body.insertAdjacentHTML(
  'afterbegin',
  '<iframe style="background: red" srcdoc="<style>body {background:none}">'
)

您将看到 iframe 页面的背景(白色)而不是元素的背景(在本例中显示为红色以突出显示问题)。
如果您在 StackOverflow 或 Twitter 上尝试相同的代码，您会发现 iframe 是红色的。
我认为这是出于安全原因，但奇怪的是，它甚至发生在这个没有任何安全 header 的简单网站上: https://sjmulder.nl/en/textonly.html
Firefox 和 Safari 不受影响。

Answer 1

对于任何寻找快速复制粘贴答案的人:包括 color-scheme注入(inject)的 iframe 中的元 header 。它必须与网页的配色方案标题相匹配(如果存在)。如果网站没有元标题，请不要添加元标题。由于这需要通过编程来确定此类 header 是否存在以及内容值是什么，因此省略了这些步骤，但是一旦方案已知，注入(inject)代码将如下所示:

document.body.insertAdjacentHTML(
    'afterbegin',
    '<iframe style="background: red" srcdoc="' +
    '<meta name=\'color-scheme\' content=\'light dark\'>' + 
    '<style>body {background:none}">')

接下来是更详细的答案，以及我是如何发现它的。
屏幕截图显示了暗模式下的 macOS。如果您转到操作系统设置并在明暗之间切换外观，这应该会在 iframe 后面交替显示白色和红色。试试看是否会发生这种情况。
经过一些实验，我发现如果一个网站有一个配色方案的元标题:

<meta name="color-scheme" content="light dark">

就像 Github.com 和 sjmulder.nl 的情况一样，没有匹配 header 的 iframe 只能正确处理浅色模式，如果用户设备设置为更喜欢深色模式，则呈现白色背景。我怀疑这是因为 "major browsers default to light mode if not otherwise configured" .
您可以对此进行试验并将测试网站上的颜色模式标题切换为“浅色”(仅)和“深色”(仅)，而无需在注入(inject)的 iframe 中指定任何内容；或者在iframe中定义而不是在网站上定义，然后切换设备颜色模式首选项以查看效果。我得出的结论是标题必须与 iframe 背景颜色匹配才能正确应用。

I reached a strange Chrome limitation on some websites

当一个网站没有定义color-scheme meta header并且注入(inject)的iframe也没有定义一个时，没有不匹配，没有问题，这就是为什么这个问题只出现在一些网站上。我还尝试了其他浏览器(Edge、Opera)，它们也有同样的问题，至少在 macOS 上是这样。但是它可以通过首先检查页面上是否存在元标题来修复在扩展中，如果是，则将相同的标题应用于注入(inject)的 iframe。