同时使用 display: none 和 loading 可能会让内容永远加载不出来。
问题背景
虽然 giscus 自带一个加载页面，但首先这个加载页面自身就有可能加载很久才显示，而且这个自带的加载页面没有任何有效信息，所以我自己写了一个加载页面，附上了 Discussions 链接。
我使用的是 giscus 的 giscus-to-parent message events 功能来检测 giscus 已加载，而这和 giscus 显示在页面上有一定的时间间隔，所以在检测到加载好之前需要先把 giscus 隐藏起来。因为是用的 Vue，很自然地就是用 v-show 让 giscus 加载好再显示。
除此之外，本着“不用白不用”的精神，我还启用了 giscus 的 lazy load（本质上是 <iframe> 的 loading）。
并且，我使用的是 Firefox，上述配置在 Firefox 上是没有问题的。
问题的发现与解决
一位群友告诉我评论加载不出来，于是我试了一下各个浏览器，在第二次（为什么是第二次呢，不懂）试 Chrome 的时候发现没加载出来。
console 没有任何报错；查看 DOM，发现 <iframe> 里面是空的，幸好我还记得自己用了 lazy load，所以很快就明白了问题所在：Chrome 比较“聪明”，看到 display: none; 就懒了，没加载这个 <iframe>。
把 v-show 换成 opacity-0 absolute 就解决了问题。
但最后还有点小插曲，因为这个 opacity-0 在 SSR 的时候是没有的，没被 UnoCSS 扫描到，就挂了，最后换成了 inline style。
后记
这件事告诉我们，有好的群友在不同浏览器上多测试几遍是非常重要的。
这点事值得发博客吗；当然是博客太空了随便水一篇
P.S. 虽然问题的解决很简单，但还是浅搜了一下看看有没有什么 best practice。倒是没搜到什么有用的，但是搜到一个有趣的（
再后记
发现加载中的 <iframe> 虽然看不见但点的到..需要加一个 z-index: -1。
再后记的后记
这个东西虽然怎么都看不见了，但宽度会让整个页面出现水平滚动条，所以要加 width: 0; height: 0;。