display: none 与 loading="lazy"

同时使用 display: noneloading="lazy" 可能会让内容永远加载不出来

截图:评论加载中

问题背景

虽然 giscus 自带一个加载页面但首先这个加载页面自身就有可能加载很久才显示而且这个自带的加载页面没有任何有效信息所以我自己写了一个加载页面附上了 Discussions 链接

我使用的是 giscus 的 giscus-to-parent message events 功能来检测 giscus 已加载而这和 giscus 显示在页面上有一定的时间间隔所以在检测到加载好之前需要先把 giscus 隐藏起来因为是用的 Vue很自然地就是用 v-show 让 giscus 加载好再显示

除此之外本着不用白不用的精神我还启用了 giscus 的 lazy load本质上是 <iframe>loading="lazy"

并且我使用的是 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倒是没搜到什么有用的但是搜到一个有趣的

论坛截图:麻烦提供下代码片段。你们已经是成熟的开发团队了,要学会自己复现bug。

再后记

发现加载中的 <iframe> 虽然看不见但点的到..需要加一个 z-index: -1

再后记的后记

这个东西虽然怎么都看不见了但宽度会让整个页面出现水平滚动条所以要加 width: 0; height: 0;