Ionic Framework无法创建透明背景IFrame的问题及解决方案

问题表现 #

• 使用Ionic Framework结合React开发网站时，需要嵌入背景透明的iframe，但无论怎么调整，iframe始终显示白色背景
• 完全一致的代码在原生React环境中运行时，iframe透明效果正常
• 已尝试所有常规解决方案，包括设置allowTransparency="true"、给iframe配置透明背景样式等，均没有效果

复现代码 #

JSX结构 #

<div className="container">
  <iframe className='iframe' allowTransparency src="about:blank"></iframe>
</div>

样式代码 #

.container {
  background-color: red;
  padding: 300px;
}

.iframe {
  background: transparent;
  background-color: transparent;
  width: 50vw;
  height: 50vh;
}

效果差异 #

• 原生普通React环境：iframe背景完全透明，仅能看到iframe默认边框，可透出下层容器的红色背景
• 基于React的Ionic Framework环境：iframe背景始终显示为白色，无法透出下层内容

问题根因 #

Ionic框架默认会在根DOM节点上设置color-scheme属性，当嵌入的about:blank类型iframe没有匹配对应属性时，浏览器会自动给iframe填充适配当前配色方案的默认白色背景，常规的透明背景CSS规则无法覆盖这一浏览器级别的默认填充行为。

修复方案 #

给iframe设置与顶层文档一致的color-scheme属性即可解决问题，示例修改如下：

<div className="container">
  <iframe 
    className='iframe' 
    allowTransparency 
    src="about:blank"
    style={{ colorScheme: 'normal' }}
  ></iframe>
</div>

如果项目配置了明暗主题切换能力，只需要将iframe的color-scheme属性值同步为当前页面实际生效的color-scheme值，即可保证不同主题下iframe都能保持透明效果。

内容的提问来源于stack exchange，提问作者Arshansh