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.