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

The rgba solution gives better display quality. Example:

#opacity {
  color: rgba(0, 0, 0, 0.5); // good quality //
}

#opacity {
  opacity: 0.5; // bad quality //
}

Answer 2

At first, you must know that rgb() is cross-browser, but choosing transparency between rgba() and opacity() depending on your case, if you have a division with DOM tree children and you don't wanna make transparent its children better choose rgba() but if it's a lonely division I prefer to use opacity().

Because browsers use Hardware Acceleration for rendering opacity(). filter: alfa(opacity=x) is same as opacity() but it is for IE8 and earlier versions.

The rgba() is a function that forces browsers to calculate a color, but not using GPU Acceleration, and if you use rgba() frequently in a page may be your browser work pretty slow. If you use a simple color I prefer to use hexadecimal color, because it is a pre-calculated color and browsers don't calculate and just paint it.

After all, if your case summons you to use rgba() but you wanna GPU Acceleration, you can use transform: translateZ(0);, nothing happens but your browser force to use GPU. it is a trick for better performance, but don't use it frequently.

Note: the transparent key for color maps to rgba(0, 0, 0, 0). it's just a key, not a exact value.

Answer 3

opacity only applies to entire elements, so you cannot apply an alpha channel to a color using the opacity property. You can only do that with the rgba() (or hsla()) function.

So rgba()/hsla() is better in all aspects because that's the only way to do it.

Answer 4

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);
}