In [ one of my other questions][1], 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][2] (and [MDN reference][3]) for `transparent` reveals that `rgba(0, 0, 0, 0)` and  `transparent` should be equal:

&gt; ***transparent***

&gt; Fully transparent. This keyword can be considered a
&gt; shorthand for transparent black, rgba(0,0,0,0), which is its computed
&gt; value.

So what gives? Why can two, seemingly, identical values produce different results? I&#39;ve looked into [the formatting][4] 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 &#39;should&#39; or &#39;according&#39; in. (For example [here][5]). 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 ##

&lt;!-- begin snippet: js hide: true --&gt;

&lt;!-- language: lang-css --&gt;

    @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;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;spinme&quot;&gt;&lt;/div&gt;

&lt;!-- end snippet --&gt;

## RGBA(0,0,0,0) ##

&lt;!-- begin snippet: js hide: true --&gt;

&lt;!-- language: lang-css --&gt;

    @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;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;spinme&quot;&gt;&lt;/div&gt;

&lt;!-- end snippet --&gt;

## 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:

&lt;!-- begin snippet: js hide: true --&gt;

&lt;!-- language: lang-css --&gt;

    @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;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;spinme&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;spinme&quot;&gt;&lt;/div&gt;

&lt;!-- end snippet --&gt;


----------
For those who can&#39;t test this in Internet Explorer, here is an animated .gif of the problem:

[![Comparison in an animated .gif][6]][6]

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&#39;ve already considered this possibility, or in case something was missed/overlooked.**

&lt;s&gt;Thanks to @juan-c-v&#39;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: 

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-js --&gt;


    $(&#39;p&#39;).text($(&#39;p&#39;).css(&quot;background-color&quot;));

&lt;!-- language: lang-css --&gt;

    p{background-color:transparent;}

&lt;!-- language: lang-html --&gt;

    &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;p&gt;&lt;/p&gt;

&lt;!-- end snippet --&gt;

If you are viewing this in Chrome/Safari, then you will most likely see (comment if you don&#39;t) `rgba(0,0,0,0)`. However in IE, you will probably see `transparent` still. I was reading the [MSDN][7] reference and found that:

&gt;The transparent keyword is not supported.

Which explains why the browsers display different results. However it doesn&#39;t explain anywhere what their version of `transparent` is actually defined as. I looked through the old CSS1 and CSS2 w3c specs and couldn&#39;t find an old definition. What does `transparent` mean?&lt;/s&gt;

  [1]: https://stackoverflow.com/questions/32423053/wobbly-css-animation-with-border-radius-in-internet-explorer
  [2]: http://www.w3.org/TR/css3-color/#transparent
  [3]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#transparent_keyword
  [4]: https://stackoverflow.com/questions/24538501/what-are-differences-between-rgb-vs-rgba-other-than-opacity
  [5]: https://stackoverflow.com/a/15958610/4907552
  [6]: http://i.stack.imgur.com/5dB6B.gif
  [7]: https://msdn.microsoft.com/en-us/library/hh674956(v=vs.85).aspx

All Computed Style Solutions on Gang of Coders

Total of 1 Computed Style Solutions

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