iframe在dark模式下无法透明

iframe在dark模式下无法透明

先说说起因：

在做项目的时候需要通过iframe链接别的网页，又需要使用自己的框架背景，就像这样：

image.png

中间这块红色区域就是需要嵌入别人的网页的。所以首先就想到iframe了。想到就开干，一顿操作下来，发现这块地方始终是白色。

allowTransparency也设置成true了，背景也设置成透明了。但还是不行。通过各种测试，发现浏览器是可以的，支持透明。那是怎么回事呢？又是对iframe有关的css属性一顿查找，都没能找到原因，难倒跟vue有关？不可能啊？

又开始测试vue，把iframe写到app根节点上，不加入任何其他代码，测试完了过后，发现vue中是可以的，那就奇了怪了，根节点可以的话，那下面就是就是vue-router了，再里面就是layout了，在界面布局layout里面就不行了，难倒跟vue-router有关系？

又开始测试vue-router和layout，测试完过后，还是没发现问题所在。然后又想到可能是哪个css文件影响了。又去浏览器控制台一个个找。找了半天下来，还是没发现。但某次切换light/dark模式的时候，惊奇的发现了light模式下，iframe透明了。

然后又是一顿找dark模式和light模式之间的差别，并且会影响到iframe透明的元素。通过一个个css文件删除中，最后发现是element-plus的dark/css-vars.scss文件产生的影响。

然后又对dark/css-vars.scss文件中的内容一项项的排除，都快郁闷的时候，最终定位到

image.png

这句代码上。

通过试验发现iframe在color-scheme: dark模式下无法透明。那么知道原因，修改起来就简单了，对iframe进行单独的color-scheme设置就好了。

<template>
    <iframe :src="src" border="0" frameborder="0" scrolling="no" width="100%" height="100%" allowtransparency="true"/>
</template>
<script lang="ts" setup>
const props = defineProps({
    src: {
        type: String,
        default: ""
    }
})
</script>

<style lang="scss">
iframe {
  background-color: transparent !important;
  color-scheme: light;//dark模式下无法透明
}
</style>