CSS3 filter performance & CPU usage: Why do certain filters tax the CPU?

Question

Consider this demo from David Nuon:

http://zunostudios.com/demos/css32014-demos/filters.html

As David notices in his post:

You\'ll no

Answer 1

The main problem with this "app" is painting. And if you apply some filter effects, or even go crazy with the slider, you are actually killing CPU with computationally expensive operations which are perfectly intended for GPU. It is very good at this stuff. If you use timeline tool and trace your app you will see massive green bars which indicates painting and painting is happening on the main thread(CPU). What you need to do is to manually promote elements that use these filter effects to a layer. You can do that with some hacks like transform: translateZ(0); or new will-change: transform; and after that you will see massive improvement in responsiveness of your app. But on mobile devices generation 2012 and below you can forget good performance, this is just too much for them.

Try to add this code through the dev tools and observe the result, if it is not faster let me know ?

 img#image {
  transform: translateZ(0); /*for older browsers*/
  will-change: transform;
}