之前在写一个CSS小Demo，一个关于3d球的旋转动画。对于CSS3D，以下属性是必不可少的：{transform-style:preserve-3d;视角：1000；transform:translate3d();}这个Demo可以点这里，大致是这样的：CodePenDemo-3Dball[1]:嗯，大概是这个效果，我想到了CSS混合模式mix-blend-mode，思考，使用blendingmode，是不是可以让效果更上一层楼，或者碰撞出一些其他的火花。mix-blend-mode：我们通常称之为混合模式。使用混合模式混合多个图层可以获得新的效果。mix-blend-mode描述了元素的内容应该与该元素的直接父元素的内容相同，以及该元素的背景如何混合。混合模式的一些使用可以在这里看到：incredible混合模式background-blend-mode(2)[2],incredible混合模式background-blend-mode[3]。CSS3Dwithmix-blend-mode然而，在为元素添加混合模式后，神奇的事情发生了，3D效果消失了。即在每个光点的CSS元素代码中加入这句话：{mix-blend-mode:lighten;}效果由CSS3D变为2D。这就很奇怪了，预期的混合并没有发生，取而代之的是3D的失败。我觉得可能跟内核有关系，上面的效果是在最新的chrome上实验得到的。跟浏览器内核有关系吗？（截至2022-09-13）带着这样的疑惑，我测试了其他几个内核：firefox104.0——和Chrome一样，3D退化为2D。Safari15.6.1——呈现良好。Safari可以正常显示，我只能简单的想应该是和内核有关。应该有很多人遇到过同样的问题。带着这个疑问，google一下。爆栈网也有同学提出了类似的质疑：StackOverflow--mix-blend-modeisbrokenby3Dtransformationspage[4]。后来在chromiumbug提交网站上，找到了一个15年的bug列表，也是关于这个问题的问题：BUG-CSSmix-blend-modeturnsoffCSSperspective.[5]。终于在错误列表的底??部找到了一个可能可靠的答案：当我们有mix-blend-mode时，创建堆叠上下文的最近祖先将隔离混合。我们在这个隔离组的根部创建了一个渲染表面，因为渲染表面不支持preserve-3d（因为它们渲染到单独的FBO中），我们看到了一个扁平的结果。ajuma@建议如果我们能以某种方式从图层中解开变换，那么在Slimmingpaintv2之后这个错误可能更容易修复。翻译一下，意思大概就是：当我们使用CSS混合模式时，stackingcontext会在使用混合模式的元素的根节点重新创建一个独立的渲染平面，可惜这个渲染平面不支持preserve-3d（因为它们渲染到一个单独的FBO中），所以我们看到了2D平面效果。验证上面一句Layerborders应该作为结论。我再用chrome提供的工具验证一下。打开开发者工具的Rendering->Layer边框：黄色代表渲染CSS时的GraphicsLayer图层，蓝色网格代表tilesSlices（瓦片），你可以把它们看成是图层（不是图层）的单位，而Chrome内核可以将它们作为渲染加速的大层的一部分上传到GPU。在normal3D模式下，启用Layerborderseffect：balllayer添加mix-blend-mode3D模式，启用Layerborderseffect：可以看到在mix-blend-mode3D模式下，确实是在整个球形元素外面，另外一层蓝色瓷砖。也就是上面说的独立渲染平面，也就是因为这个渲染平面不支持preserve-3d，所以我们最终得到的是2D平面图形。过滤器也会导致CSS3D失败？不不不，这谁受得了。那么如果3D失败是因为mix-blend-mode额外生成了一个独立的渲染平面导致的，那么是否还有其他元素会导致同样的结果呢？带着疑惑，我去掉了mix-blend-mode，我给3d元素加了一个filter:{-mix-blend-mode:lighten;+filter:blur(1px);}果然，同样的问题是3D无效：balllayer3总结道。那么你应该可以初步得出结论，这些都需要在渲染时独立生成一个渲染平面，并包含preserve-3d属性，这会导致内部CSS3D失效。暂时发现如下属性，会导致CSS3D失效：mix-blend-modebackground-blend-modefilter其他问题这个bug有什么影响？一般来说，很少有人会同时使用CSS3DMixingmode或者filter，这两个属性比较锦上添花，所以大部分时候不使用也没什么问题，所以影响是不是很大。上面的FBO是什么？我不是100%确定上面的FBO到底是什么。推测应该是FrameBufferObject，帧缓冲对象，存在于显存中。帧缓冲区是OpenGL使用的二维数组和内存区域的集合：颜色缓冲区、深度缓冲区、模板缓冲区和累积缓冲区。现在各种3D场景渲染到屏幕上，先放在一个FBO里，可以理解为加速渲染的离屏图像。bug什么时候修复？在chromiumbugs站点上，上述bug被合并到issue575099[6]，最终状态为Untriaged，意味着它没有被分配优先级，意味着等待某人决定谁应该声明并修复该特定bug。因此，短期内可能没有解决的希望。最后，本文到此结束，希望对你有所帮助：）参考资料[1]CodePenDemo-3D球：https://codepen.io/Chokcoco/pen/JwdvmJ[2]Incrediblemixedmodebackground-blend-mode(2):https://github.com/chokcoco/iCSS/issues/31[3]不可思议的混合模式background-blend-mode:https://github.com/chokcoco/iCSS/issues/16[4]StackOverflow——mix-blend-mode被页面上的3D转换破坏：https://stackoverflow.com/questions/32932966/mix-blend-mode-is-broken-by-3d-transformations-on-page[5]BUG-CSSmix-blend-mode关闭CSSperspective.:https://bugs.chromium.org/p/chromium/issues/detail?id=543445[6]issue575099:https://bugs.铬.org/p/chromium/issues/detail?id=575099
