属性：

:

效果，想到了 CSS 混合模式 mix-blend-mode，寻思着，利用混合模式，是否能让效果更上一层楼或者碰撞出一些其他火花。

mix-blend-mode：我们通常称之为混合模式，利用混合模式将多个图层混合可以得到一个新的效果，mix-blend-mode 描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

、

加上了一个混合模式之后，神奇的事情发生了，3D 效果消失了。

代码中添加这样一句：

效果从 CSS 3D 变成了 2D。

效果是在 chrome 65.0.3325.181 试验得到的。

Layer borders：

上传给 GPU 进行渲染加速。

• 效果：

• 添加了 mix-blend-mode 的 3D 模式下，开启 Layer borders 效果：

mix-blend-mode 的 3D 模式下，确实在整个球形元素之外，又多了一层蓝色 tile。也就是上文提到的独立的渲染平面，也就是因为这个渲染平面不支持 preserve-3d 的原因，我们最终得到了一个 2D 平面图形。

mix-blend-mode 多生成了一个独立渲染平面导致的 3D 失效，那么是否有其他元素也会导致同样的结果呢？

mix-blend-mode，我又给设置了 3d 的元素添加了一个滤镜：

生成一个渲染平面，且包含了 preserve-3d 的属性，都会导致内部的 CSS 3D 失效。

属性，都会导致 CSS 3D 失效：

• mix-blend-mode
• background-blend-mode
• filter

属性更多的锦上添花的作用，所以大部分时候，不使用它们就不会有问题， 所以影响不是很大。

FBO 准确而言是什么我也无法 100% 确定，推测应该是 Frame Buffer Object，帧缓存对象，存在于显存中。帧缓存是一些二维数组和 OpenGL 所使用的存储区的集合：颜色缓存、深度缓存、模板缓存和累计缓存。

图片，用于加速渲染。

，并且最终状态是 Untriaged，表示尚未分配优先级，意思是等待某人确定哪个人应该认领并修复该特定错误。所以，短期内可能无望解决。

 ，持续更新，欢迎点个 star 订阅收藏。

文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

dio controls="controls" style="display: none;">