What's the difference between rgba(0,0,0,0) and transparent?

Question

In one of my other questions, the solution to fixing a rendering issue was by using the value rgba(255, 255, 255, 255) instead of transparent. We

Answer 1

rgba() is a function that calculates the color and transparency for an item, it is very useful when you want to control the color and the alpha of an item, especially if you do not want to totally transparent. Being a function, you are telling the browser what color and transparency exact you want to draw the item, this is closer to JS than CSS.

On the other hand, "transparent" is a CSS property that identifies an item will be completely transparent, without making calculations of color and alpha. Being a CSS property and not a function, each browser applies it in a different way, so it would differ much to the method used by the browser to apply this property.

EDIT Ok, you say that i contradict that in my answer:

transparent

Fully transparent. This keyword can be considered a shorthand for transparent black, rgba(0,0,0,0), which is its computed value.

Well, i dont contradict that. One thing thing is the specification of the W3C standard, and another thing is the implementation of that standard by developers of different browsers. I will not break the code of IE to prove what I'm saying, because it's a bit illegal, directly ask the guys at Microsoft to see their answer.

What I've told you is that they are browsers that do not handle transparent and rgba(0, 0, 0, 0) in the same way. That's because the transparent property is much older than the rgba(0, 0, 0, 0) function (you like that more than rgba ()?), And most likely, while for IE have developed an effective method for rgba (r, g, b, a), they are still using the old method with the transparent property.

One thing you always have to keep in mind is that no web browser meets the W3C standards to 100%, that is why in most of the new property must be added the specific extension of the manufacturer (moz- webkit-, etc)

Think why it is so absurd to write the same thing four times, when everything would be solved using the standard property, and yourself will answer because it is not the same to use transparent and rgba (0, 0, 0, 0) in IE.

Answer 2

I've been trying your code for the value transparent in Chrome, installed on a laptop running Windows 7 OS.

I'm not getting any wobble whatsoever myself. So I expect this issue is specific for certain browsers and operating systems based on how that specific browser and OS decide to render your element.

This issue could be related to whether or not your browser uses hardware acceleration. Now, there is a trick to force your browser to use hardware acceleration : make your browser think that a 3D transformation is being applied to an element.

You could to that by adding the following properties to your element :

.fake3Dtransformation {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
  /* Other transform properties here */
}

While I'm not entirely sure if this will fix the wobbling issue when using transparent (as I'm not able to reproduce the issue), applying this "hack" should in theory always give you the smoothest rendering. Check out eg. this article for more information.

So for your demo code, you'd end up with this :

@keyframes spin{
    0% {transform:rotateZ(0deg);}
    50% {transform:rotateZ(360deg);border-radius:60%;}
    100%{transform:rotateZ(720deg);}
}
#spinme{
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    display:inline-block;
    position:relative;
    left:0;
    top:0;
    margin:0.2rem;
    width:0.8rem;
    height:0.8rem;
    border:0.2rem solid black;
    border-radius:0%;
    outline: 1px solid rgba(0,0,0,0);
    animation: spin infinite 4s;
}

#spinme:nth-of-type(2){
    outline: 1px solid transparent;
}

<div id="spinme"></div>
<div id="spinme"></div>

---

THE FIDDLE :

https://jsfiddle.net/z2r7ypy7/4/

Answer 3

In my opinion, it is not good to use the same id twice, whatever you are doing, it is meant as an identifier. I also do not find it weird that they both show the animation, since both of them have the same id that match the animation in the css.

#spinme{
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    display:inline-block;
    position:relative;
    left:0;
    top:0;
    margin:0.2rem;
    width:0.8rem;
    height:0.8rem;
    border:0.2rem solid black;
    border-radius:0%;
    outline: 1px solid rgba(0,0,0,0);
    transform:rotateZ(0deg);

}

#spinme:nth-of-type(1){
    animation: spin infinite 4s;
}

if you do this, only one wobbles, and it makes perfect sense to me. Perhaps it does not answer your question about the transparent issue, but I am not sure if that is really the issue anyways.

edit No matter which color I try, transparent or rgba(0,0,0,0) in any combination they both animate on Safari.