CSS opacity vs rgba: which one is better?

Question

Assuming you're applying a CSS opacity to a solid color. Is it better, in terms of memory and performance, to use an rgba value or the color+opacity?

Answer 1

As others have stated, rgba() and opacity work differently:

• rgba() affects a single property, like color, background-color or border-color, of a elements targeted by CSS and only of these elements
• opacity affects all properties (the whole outlook) of targeted elements along with all their DOM tree children

Still, many effects can be achieved using either of these and the performance/compatibility does vary so this question is not pointless.

From my experience, using and especially animating the opacity property is the easiest way to cause the famous text antialiasing glitch in webkit browsers (especially Safari, Hovering over CSS transition in Safari lightens certain font color). This is due to the fact that opacity affects not one but a whole hierarchy of elements and browsers sometimes fail to properly distinguish which elements are redrawn. No such problems happen when using rgba().

Furthermore, many versions of Opera, including the almost current v12.11, produce serious graphical glitches with some usage scenarios of opacity. Mixing opacity with text, image backgrounds and text shadows and then scrolling the page or div is the easiest way to reproduce the issue. A similar problem occurred for me on the iOS version of Safari. Again, no such issues with rgba().

These things happen for a reason. From the rendering point of view, when using rgba() for color/background-color/border-color, we tell the browser explicitly which DOM elements and which graphical layers of elements are affected. This makes it much easier for browsers to figure out when they need to get redrawn. Also, narrowing down the area of effect is a warranty of performance boost, which I've confirmed by trying both options and noticing that website using rgba() in place of opacity felt noticably smoother, especially on Safari and Opera.

Sure, things like fading images cannot be achieved with rgba() (mask-image not being supported enough), but for tasks like simple transparent text or background, rgba() seems to be a better choice. Even more so if mixed with CSS3 animation.

Oh, and remember to always include a fallback when using rgba():

.el {   color: rgb(0, 0, 0);   color: rgba(0, 0, 0, 0.5); }