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 tested using rgba(0, 0, 0, 0) and this still corrected the problem, meaning that it is the definition of transparent that causes the error. However, looking at the W3C CSS3 Specification (and MDN reference) for transparent reveals that rgba(0, 0, 0, 0) and transparent should be equal:

transparent

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

So what gives? Why can two, seemingly, identical values produce different results? I've looked into the formatting of RGBA, and looked for similar questions (to no avail). Every question/answer that mentions the conversion from transparent to rgba(0,0,0,0) always has the words 'should' or 'according' in. (For example here). What is the actual difference, and why does it change the output so much?

N.B: This occurs in most, if not all, versions of Internet Explorer. We also know that it occurs in some versions of Firefox. However Chrome and Safari do not display this behaviour, leading us to believe that there is some sort of patch for this in -webkit.

---

To be able to submit this as a bug we need to reproduce the problem using the minimal amount of code. So, transferred from my other question, here is a comparison of using transparent vs rgba(0,0,0,0), and what happens when we use both.

Transparent

@keyframes spin{
 0% {transform:rotateZ(0deg);}
 50% {transform:rotateZ(360deg);border-radius:60%;}
 100%{transform:rotateZ(720deg);}
}
.spinme{
 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 transparent;
 transform:rotateZ(0deg);
 animation: spin infinite 4s;
}

<div class="spinme"></div>

RGBA(0,0,0,0)

@keyframes spin{
 0% {transform:rotateZ(0deg);}
 50% {transform:rotateZ(360deg);border-radius:60%;}
 100%{transform:rotateZ(720deg);}
}
.spinme{
 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);
 animation: spin infinite 4s;
}

<div class="spinme"></div>

Both

As pointed out by @andyb, there is strange behaviour when using both on separate elements. You would expect only one to wobble, however they both do. As demonstrated:

@keyframes spin{
  0% {transform:rotateZ(0deg);}
  50% {transform:rotateZ(360deg);border-radius:60%;}
  100%{transform:rotateZ(720deg);}
}
.spinme{
  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);
  animation: spin infinite 4s;
}
.spinme:nth-of-type(2){
  outline: 1px solid transparent;
}

<div class="spinme"></div>
<div class="spinme"></div>

---

For those who can't test this in Internet Explorer, here is an animated .gif of the problem:

This is with transparent on the left, rgba in the middle, and both on the right.

---

As pointed out by @Abhitalks I misread the reference, however I will leave the below in the question to show that we've already considered this possibility, or in case something was missed/overlooked.

Thanks to @juan-c-v's answer I decided to attempt to create a test to find the computed value for transparent in each browser, and came up with the following:

$('p').text($('p').css("background-color"));

p{background-color:transparent;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p></p>

If you are viewing this in Chrome/Safari, then you will most likely see (comment if you don't) rgba(0,0,0,0). However in IE, you will probably see transparent still. I was reading the MSDN reference and found that:

The transparent keyword is not supported.

Which explains why the browsers display different results. However it doesn't explain anywhere what their version of transparent is actually defined as. I looked through the old CSS1 and CSS2 w3c specs and couldn't find an old definition. What does transparent mean?

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.