一个偶然的机会在你土鳖上刷视频刷到一个利用CSS制作一个很酷的按钮的视频,最终效果确实很酷。于是兴致勃勃的打开了作者提供的codepen,然后吧,怎么总感觉里面出来的东西和视频里的不一样。进一步看了一下,竟然是firefox在同一段代码上显示的和chrome不一样!而很显然,firefox显示的效果是正确的。

于是开始了在网上四处查找问题,四处询问的过程。很庆幸,在S1发帖后有大神帮忙解决了这个问题。

https://bbs.saraba1st.com/2b/thread-2007751-1-1.html

总结一下就是chrome在filter和transform的渲染顺序上存在问题,并没有依照要求先filter再transform的顺序来,从而导致了渲染出来的效果不对。相关内容可参考

https://drafts.csswg.org/css-transforms-2/#grouping-property-values

依照这个问题,S1的大神给出了修复的方法,增加一个div取代原来的伪类。再利用这个div和它自身的伪类分别设定transform和filter,这样一来显示效果就对了。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

左半红印发表于2021.06.3rd