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

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

---

THE FIDDLE :

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