CSS opacity filter faster than opacity property?

Question

On this html5rocks article, it states that

In general the CSS ‘opacity’ property isn’t hardware accelerated, but some browsers that implement filters using hardware acceleration will accelerate the filter version of opacity for much better performance.

This seems to imply that in performance-intensive applications, one should use the opacity filter instead of the opacity property. For example, I'm rendering a canvas under an image with an opacity property of 0.5. Should I be using the filter instead? How could one measure performance gains when using this filter property, and on what platforms might there be a noticeable improvement?

Answer 1

First, CSS3 filter effects are still a draft standard and their browser support varies. So think twice whether you really need them (e.g., CSS Filters in the Real World article (04.2013) reports rendering artifacts). Hardware acceleration in Webkit and GPU Accelerated Compositing in Chrome give an overview of their implementations and both suggest there's no discrimination against CSS2 or CSS3 (I'd be surprised if there was).

Second, a review in PC magazine (01.2013) shows results of some online benchmarks by IE and Firefox teams. There are canvas, particle and CSS (rotation) benchmarks. The Maxthon (uses WebKit) and Opera versions tested there do not support acceleration so they give a hint on the performance gain. Regarding the transparency: it's orders of magnitude less computations than resampling so you shouldn't notice any difference for this specific operation.

Answer 2

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

And also, there is a severe lack of support for filters across browsers as can be seen here, though opacity is supported across the board: http://caniuse.com/#search=opacity.

Not to mention the opacity property is just so much easier to use.

I'd stick with what you've got.