把网页转成3D的，发现问题

myzbx 2025-03-10 18:44 27 浏览

问题表现

就在我正准备录制下个系列视频的时候，发现何方的个人小站-Markdown 工具页面下面出现了大面积的空白（如下图 1）。这是什么情况？我第一反应可能是我忘了给代码或预览的窗口添加 overflow: auto 导致元素的整个长度直接推在了元素流里面。

原因分析

但当我看了代码和界面以后发现是对的（如下图 2），并没有忘记添加 overflow: auto。而且我查看 body 元素的时候发现高度是正常的，并没有包含下面空白区域的高度。这时候我感觉可能是 Edge 浏览器的 Bug。于是我试了 Chrome、Firefox、Safari 以及 Linux 和 Windows 中的各种浏览器，都能复现这个问题。确定了不是浏览器的 Bug。

于是我又查看了 html 元素的高度，发现在 html 高度竟然是包含了空白区域高度的（如下图 3）。到这个时候我就确定一定是有什么元素浮动到了元素流里面，而且这个元素一定是不可见或非常小的，这就只能逐个排查可能的元素。

在我排查过程中发现如果把预览关掉或不预览 HTML 渲染结果（见下图 4），只预览 HTML 代码的情况下是没有空白问题的。这就可以确定是 Markdown 的渲染结果出现了问题。但渲染结果是 Markdown 解析器生成的，这又增大了排查的难度。

这个时候我突然想起来，浏览器的开发都工具是可以查看页面 3D 结构的。在复合图层里面并没有看出什么问题(见下图 5)。但当我查看 3D DOM 结构（见下图 6）并把视频拉到最下面是发现了问题——在最下面出现了几条东西。点击 3D 视图可以跳转到对应的 dom 结果里面，原来导致页面空白的罪魁祸首是公式（见下图 7）。

问题原因

我在 Markdown 生成 HTML 的时候使用的是 katex 来渲染公式，默认情况下它会生成两套 DOM 结构，一套 mathml 用于读屏软件或搜索引擎等识别这是公式、另一套是 html 它用于渲染显示我们看到的公式。

为了不让 mathml 和 html 同时显示出现，katex 把 mathml 设置成了 position: absolute 且只有一个像素大小。

.katex-mathml {  clip: rect(1px, 1px, 1px, 1px);  border: 0;  height: 1px;  overflow: hidden;  padding: 0;  position: absolute;  width: 1px;}

问题就出在了 position: absolute 上面，因为我们的预览容器是 overflow: auto 的。在可滚动的容器里面如果存在绝对定位的元素，这个元素就会脱离容器出现在主元素流里面。也就是说如果容器没有溢出滚动的时候这个元素该出现在哪儿，在有溢出滚动的时候它还在那儿。这就造成了它前面出现的空白。

解决方案

知道了问题原因也就好解决了，三种改动较小的方案1：

把 katex 生成 htmlAndMathml 改为 html。
把类 .katex-mathml 的 position: absolute 改成 position: fixed。
把 .katex-mathml 的父类的 position 改成非 static。

CSS 3D 转换

上一篇：让交互更加生动!有意思的鼠标跟随 3D 旋转动效
下一篇：CSS3 动画——Animations

把网页转成3D的，发现问题

问题表现

原因分析

问题原因

解决方案

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

20个免费音乐音效下载网站，无版权素材商业影片也可用