探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题

今天在写一个小的 CSS Demo，一个关于 3d 球的旋转动画，关于 CSS 3D，少不了会使用下面这几个属性：

1 2 3 4 5

{     transform-style: preserve-3d;     perspective: 1000;     transform: translate3d(); }

这个 Demo 你可以戳这里，大概是这样

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

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

 

 

CSS 3D 配合 mix-blend-mode

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

也就是在每个光点的 CSS 元素代码中添加这样一句：

1 2 3

{     mix-blend-mode: lighten; }

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

这就很蹊跷了，预想中的混合并没有发生，取而代之的是 3D 的失效。我想，也许与内核有关，上面的效果是在 chrome 65.0.3325.181 试验得到的。

 

是否与浏览器内核有关？

带着这样的疑问，我又测试了下其他几个内核：

• firefox 64.0 -- 这次更加诡异，整个图案都不会再被渲染出来
• Safari 12.0.2 -- 渲染正常

Safari 是可以正常展示的，只能初略的认为，应该是与内核有关系的。那应该也有很多人遇到过同样的问题，带着这个疑惑，google 一下。

 

随后，在 chromium bug 提交网站上，找到了 15 年的一个 bug 单，也是对这个问题的疑问：

最终在 bug 单的最下面找到了可能靠谱的回答：

When we have mix-blend-mode, the closest ancestor that creates stacking context will isolate blending. We create a render surface at the root of this isolated group and because render surfaces don't support preserve-3d(because they render into separate FBO), we see a flattened result.

ajuma@ suggested that this bug maybe much easier to fix after Slimming paint v2 if we can somehow disentangle transforms from layers.

翻译一下，意思大概是：当我们使用 CSS 混合模式的时候，堆叠上下文会重新对这个使用了混合模式的元素的根节点处创建一个独立的渲染平面，但是很可惜，这个渲染平面是不支持 preserve-3d 的(因为它们渲染到单独的FBO中)，所以我们看到是一个 2D 的平面效果。

 

验证 Layer borders

上面的那句话应该已经可以作为结论，我再使用 chrome 提供的工具验证一下，打开开发者工具的 Rendering -> Layer borders：

黄色代表 CSS 渲染时候的 GraphicsLayer 层， 蓝色网格表示瓦片(tile)，你可以把它们当作是层的单元（并不是层），Chrome 内核可以将它们作为一个大层的部分上传给 GPU 进行渲染加速。

• 正常 3D 模式下，开启 Layer borders 效果：

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

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