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

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

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

这个 Demo 你可以戳这里,大概是这样:CodePen Demo - 3D ball:

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

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

关于混合模式的一些使用可以看这里:不可思议的混合模式 background-blend-mode (二)不可思议的混合模式 background-blend-mode

CSS 3D 配合 mix-blend-mode

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

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

{
    mix-blend-mode: lighten;
}

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

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

是否与浏览器内核有关?

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

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

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

爆栈网也有同学提出类似的疑惑:StackOverflow -- mix-blend-mode is broken by 3D transformations on page

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

BUG -CSS mix-blend-mode turns off CSS perspective.

最终在 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.

[email protected] 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 平面图形。

滤镜也会导致 CSS 3D 失效

完了吗?没有。不是吧,这谁顶得住啊。

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

带着疑惑,去掉了 mix-blend-mode,我又给设置了 3d 的元素添加了一个滤镜:

{
-    mix-blend-mode: lighten;
+    filter: blur(1px);
}

果然,出现了同样的问题,3D 失效:

总结一下

嗯。那么应该可以初步得到一个结论就是所有这些在渲染时候需要再独立生成一个渲染平面,且包含了 preserve-3d 的属性,都会导致内部的 CSS 3D 失效。

暂时我发现的有下述几个属性,都会导致 CSS 3D 失效:

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

其他问题

这个 bug 有什么影响

额,通常来说,很少会有人在使用 CSS 3D 的同时使用混合模式或者滤镜,这两个属性更多的锦上添花的作用,所以大部分时候,不使用它们就不会有问题, 所以影响不是很大。

上文中的 FBO 是什么?

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

各种三维场景现在渲染到屏幕上都是先放到一个 FBO 中,可以理解为一张离屛图片,用于加速渲染。

Bug 何时会被修复

在 chromium bugs 网站,上述 bug 被合并到 issue 575099,并且最终状态是 Untriaged,表示尚未分配优先级,意思是等待某人确定哪个人应该认领并修复该特定错误。所以,短期内可能无望解决。

最后

感谢耐心读完。更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

好了,本文到此结束,希望对你有帮助 :)

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

原文地址:https://www.cnblogs.com/coco1s/p/10137045.html

时间: 2024-10-03 14:14:49

探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题的相关文章

font-family:黑体;导致css定义全部不起作用

css文件里font-family: "黑体";这句会导致后面的css定义全部不起作用了.只要把font-family: "黑体"; 改成font-family:黑体; 就行了,去掉空格和双引号.这个问题只存在于IE6中.在互联网上找到的部份答案一处容器的font-family属性里写了"宋体",而IE6一下不解析""号,于是就导致整个页面的居中失效 css中指定font-family属性为黑体.幼圆.微软雅黑等,一一无法正常

CSS 的滤镜

为了帮助网友解决“CSS RevealTrans滤镜”相关的问题,学网通过互联网对“CSS RevealTrans滤镜”相关的解决方案进行了整理,用户详细问题包括: 学网 www.xue163.com revealTrans是CSS中的图片切换的动态滤镜.它能产生23中动态效果,更为奇妙的是它还能在23种动态效果中,随机抽用其中的一种.两个参数Transition和Duration,分别是变换效果和持续时间,其中Duration是浮点数.此外还有两个属性Enabled .Percent分别是是否

CSS混合模式

层叠上下文z-index只是解决两个元素覆盖,谁离用户更近的问题.而CSS混合模式,则是处理两个元素覆盖部分如何混合的问题.如果了解photoshop的话,对这种现象应该不陌生.CSS3有两个与混合模式相关的属性:mix-blend-mode和background-blend-mode,本文将详细介绍CSS混合模式 元素混合 元素混合mix-blend-mode应用于两个元素之间的混合 mix-blend-mode 初始值: normal 应用于: 所有元素 继承性: 无 值: normal(正

【css】ie6下使用css sprit 滤镜做透明图片

.service{ /*position:relative;*/ height:96% !important;overflow: hidden;} .pright{ height:40px; text-align:right; margin-top:30px; padding-right:50px; overflow:hidden; } .pright .btn_order{ background:url('../images/order_icon02.png') 0 0 no-repeat;

CSS学习笔记01 CSS简介

1.CSS定义 CSS 指层叠样式表 (Cascading Style Sheets),是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG.XHTML 之类的 XML 分支语言)文档的呈现.CSS 描述了在屏幕.纸质.音频等其它媒体上的元素应该如何被渲染的问题. 2.为何使用CSS 网页是由HTML标签组成的,那么这些标签会根据浏览器的默认方式进行排版与样式的渲染,如果想要更改这些默认的样式,推荐用CSS,因为这样不仅实现了内容与表现分离的问题,而且更易于维护. 3.CSS语法 C

PHP.9-HTML+CSS(三)-CSS样式

CSS样式 CSS是Cascading Style Sheets的简写,它除了可以轻松设置网页元素的显示位置和格式处,甚至还能产生滤镜,图像淡化,网页淡入淡出的渐变效果.CSS就是要对网页的显示效果实现与Word一样的排版控制一个段落.字体.颜色.背景.边框等. 注:注释/*  */里面不能再包含注释   1.CSS的四种设置方式 内联样式表:在HTML元素标签中使用style属性内联,在需要相同样式情况下,不适用 每个HTML标签都可以加样式,如下:   <span style="fon

CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(1)设定背景图

技术的新发展,除计算机可以接入互联网之外,平板电脑.智能手机.智能电视等其他设备均可访问互联网.在多设备时代,构建多屏体验也不是听说的那么难. 但是这也增加了学习CSS的难度?不知道如何上手,只懂一点基础的CSS语法,在移动互联时代,难道我们就这样落伍了??好好学习吧,看完<CSS高效开发实战:CSS 3.LESS.SASS.Bootstrap.Foundation>,给自己的未来打气! 5.1  设定背景图的大小 在CSS 3出现之前,背景图片的尺寸是由图片的实际尺寸决定的.如果同样的图片要

[ css 变换 transform 属性 ] css中transform属性讲解及实例演示的区别

一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了~~ 看看下图女帝的动作以及神情,就可以知道名字带D的家伙的厉害! 最近折腾iPad的一些东西,有一些3D效果的交互.有些事情,总以为是遥远的未来,谁知真正发生的时候说来就来,比如说一颗想结婚的心,又比方说在实际项目中折腾3D transform效果. 然而,虽然以前折腾过3D变换效果(webkit

&lt;转&gt;HTML+CSS总结/深入理解CSS盒子模型

原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverflow上求助.ifaou在帮助我解决我问题的同时,还推荐我阅读一篇有关CSS盒子模型的文章<The CSS Box Model>,阅读之后受益匪浅,才知道自己对盒子模型知识还是如此欠缺.恰逢学期末,项目验收后暂时告一段落,有空闲的时间.于是想把这篇文章翻译出来,一方面再给自己一点挑战和锻炼,另一方