今天做一个效果,把页面进行灰化,就是遇到什么公祭日需要把页面灰化那种,依稀记得以前在pc端是用ie的filter处理的,我索性也去查了下,css3果然有这个属性,代码如下
filter: grayscale(100%);
加上去之后完美解决了,但是到真机上测试,发现我刚买的疯7都有点卡,最后测试用5s测试时候,卡的不行,百思不得其姐,猜过是position的问题,猜过是react重复渲染的问题,后来排查都不是,最后才想起用到了filter,果然,就是它导致的,但是,效果不能去掉,后来想到了css驱动硬件加速,所以就加了以下这句代码
transform: translate3d(0, 0, 0);
问题解决了,这是启用硬件加速的最好方式
注
最后发现,filter在滑动时,有时候dom都不渲染,最后彻底放弃使用filter了,真的是性能杀手