当前位置: 首页 > Web前端 > CSS

探索CSS混合模式-filter导致CSS3D失败的问题

时间:2023-03-30 18:47:13 CSS

今天在写一个CSS小Demo,一个关于3d球的旋转动画。对于CSS3D,以下属性是必不可少的:{transform-style:preserve-3d;视角:1000;transform:translate3d();}这个Demo可以点这里,大致是这样的:CodePenDemo-3Dball:嗯,大概是这个效果,我想到了CSS混合模式mix-blend-mode,我想知道使用混合模式是否可以使效果更上一层楼或与其他一些火花碰撞。mix-blend-mode:我们通常称之为混合模式。使用混合模式混合多个图层可以获得新的效果。mix-blend-mode描述了元素的内容应该和该元素的直接父元素的内容一致以及该元素的背景如何混合。混合模式的一些用法可以看这里:难以置信的混合模式background-blend-mode(2),incredibleblendingmodebackground-blend-modeCSS3Dwithmix-blend-mode然而,给元素添加混合模式后,魔法发生了,3D效果消失了。即在每个光点的CSS元素代码中加入这句话:{mix-blend-mode:lighten;}效果由CSS3D变为2D。这就很奇怪了,预期的混合并没有发生,取而代之的是3D的失败。我想,可能跟内核有关系,上面的效果是在chrome65.0.3325.181的实验中得到的。跟浏览器内核有关系吗?带着这个问题,我又测试了其他几个内核:firefox64.0--这次更奇葩,整个花样都不会渲染了Safari12.0.2--Safari在渲染正常的情况下也能正常显示,只有可以粗略认为应该和内核有关。应该有很多人遇到过同样的问题。带着这个疑问,google一下。Blaststack.com上也有同学提出了类似的疑惑:StackOverflow--mix-blend-modeisbrokenby3Dtransformationsonpage后来在chromiumbugsubmission网站上,发现了一个15年的bug列表,也是一个关于本期:BUG-CSSmix-blend-mode关闭CSS透视图。终于在错误列表的底??部找到了一个可能可靠的答案:当我们有mix-blend-mode时,创建堆叠上下文的最近祖先将隔离混合。我们在这个隔离组的根部创建了一个渲染表面,因为渲染表面不支持preserve-3d(因为它们渲染到单独的FBO中),我们看到了一个扁平的结果。ajuma@建议如果我们能以某种方式从图层中解开变换,那么在Slimmingpaintv2之后这个错误可能更容易修复。翻译一下,大概意思是:当我们使用CSS混合模式时,stackingcontext会在使用混合模式的元素的根节点重新创建一个独立的渲染平面,但不幸的是,这个渲染平面不支持preserve-3d(因为它们被渲染成一个单独的FBO),所以我们看到了一个2D的平面效果。验证上面一句Layerborders应该作为结论。我再用chrome提供的工具验证一下。打开开发者工具的Rendering->Layer边框:黄色代表渲染CSS时的GraphicsLayer图层,蓝色网格代表tilesSlices(瓦片),你可以把它们看成是图层(不是图层)的单位,而Chrome内核可以将它们作为渲染加速的大层的一部分上传到GPU。Innormal3Dmode,enableLayerborderseffect:In3Dmodewithmix-blend-mode,enableLayerborderseffect:可以看到在mix-blend-mode3D模式下,确实是在整个球形元素外面,另外一层蓝色瓷砖。也就是上面说的独立渲染平面,也就是因为这个渲染平面不支持preserve-3d,所以我们最终得到的是2D平面图形。过滤器也会导致CSS3D失败?不不不,这谁受得了。那么如果3D失败是因为mix-blend-mode额外生成了一个独立的渲染平面导致的,那么是否还有其他元素会导致同样的结果呢?带着疑惑,我去掉了mix-blend-mode,我给3d元素加了一个filter:{-mix-blend-mode:lighten;+filter:blur(1px);}果然还是一样的问题,3D失败:总结一下嗯。那么你应该可以初步得出结论,这些都需要在渲染时独立生成一个渲染平面,并包含preserve-3d属性,这会导致内部CSS3D失效。暂时发现如下属性,会导致CSS3D失效:mix-blend-modebackground-blend-modefilter其他问题这个bug有什么影响?一般来说,很少有人会同时使用CSS3DMixingmode或者filter,这两个属性比较锦上添花,所以大部分时候不使用也没什么问题,所以影响是不是很大。上面的FBO是什么?我不是100%确定上面的FBO到底是什么。推测应该是FrameBufferObject,帧缓冲对象,存在于显存中。帧缓冲区是OpenGL使用的二维数组和内存区域的集合:颜色缓冲区、深度缓冲区、模板缓冲区和累积缓冲区。现在各种3D场景渲染到屏幕上,先放在一个FBO里,可以理解为加速渲染的离屏图像。bug什么时候修复?在chromiumbugs站点上,上述bug被合并到issue575099中,最终状态为Untriaged,这意味着它没有被分配优先级,意味着等待某人决定谁应该声明并修复该特定bug。因此,短期内可能没有解决的希望。最后,感谢您的耐心阅读。更多精彩CSS技术文章汇总在我的Github——iCSS,持续更新。欢迎点个星订阅收藏。好了,本文到此结束,希望对大家有所帮助:)有什么问题或者建议可以多交流,原创文章,文笔有限,知识匮乏,如有不妥之处,敬请谅解!文章,请告诉我。