CSS opacity filter faster than opacity property?

Question

This html5rocks article says that

In general, CSS opacity is not hardware accelerated, but some browsers that implement filters using hardware acceleration will speed up the filter opacity version to improve performance.

This, apparently, means that in applications with a high degree of performance, an opacity filter should be used instead of the opacity property. For example, I create a canvas below an image with an opacity value of 0.5. Should I use a filter instead? How can I measure performance gains using this filter property and on which platforms can there be a noticeable improvement?

Answer 1

Firstly, CSS3 filter effects are still a draft of the standard and their browser support varies . So think twice whether they really need you (for example, CSS filters in the Real World article (04.2013) report the export of artifacts). Webkit hardware acceleration and Chrome accelerated graphing provide an overview of their implementations and both indicate no discrimination against CSS2 or CSS3 (I would be surprised if I were).

Secondly, a review in the PC magazine (01.2013) shows the results of some online tests using the IE and Firefox commands. There are tests of canvas, particles and CSS (rotation). The versions of Maxthon tested there (using WebKit) and Opera do not support acceleration, therefore they give a hint about performance enhancement. Regarding transparency: this is an order of magnitude less computation than oversampling, so you should not notice any differences for this particular operation.

Answer 2

Paul Irish says here that opacity is one of the few CSS properties that speeds up * * : https://plus.google.com/+AddyOsmani/posts/aTRerYcZpts

In addition, there is a serious lack of filter support in browsers, as can be seen here , although transparency is supported in all directions: http://caniuse.com/#search=opacity .

Not to mention the fact that the opacity property is much easier to use.

I stick to what you have.