Why is transition on 'transform: scale()' makes an element become pixelated in webkit browsers?

Question

If I scale an element using CSS scale() it becomes pixelated while transitioning. But it becomes normal again when transition is finished (refer to the screenshot 1). However it happens only in webkit browsers (tested in Chrome and Opera)

.foo {
  background: #4FC093;
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  box-shadow: 0 0 10px inset;
  margin: 0 auto;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  cursor: pointer;
  -webkit-transition: all 3s ease;
  -moz-transition: all 3s ease;
  -ms-transition: all 3s ease;
  transition: all 3s ease;
}

.foo:hover {
  -webkit-transform: scale(20);
  -moz-transform: scale(20);
  -ms-transform: scale(20);
  transform: scale(20);
}

<div class="foo"></div>

Screenshot 1

A possible workaround

I have also tried using scale3d() with reversing the scale of this div, as suggested here
But it caused a jagged edge around the div in Google Chrome.

.foo {
  background: #4FC093;
  display: block;
  position: absolute;
  width: 400px;
  height: 400px;
  box-shadow: 0 0 200px inset;
  margin: 0 auto;
  border-radius: 50%;
  cursor: pointer;
  -webkit-transition: all 3s ease;
  -moz-transition: all 3s ease;
  -ms-transition: all 3s ease;
  transition: all 3s ease;
  -webkit-transform: scale3d(0.05, 0.05, 0.05);
  -moz-transform: scale3d(0.05, 0.05, 0.05);
  -ms-transform: scale3d(0.05, 0.05, 0.05);
  transform: scale3d(0.05, 0.05, 0.05);
}

.foo:hover {
  -webkit-transform: scale3d(1, 1, 1);
  -moz-transform: scale3d(1, 1, 1);
  -ms-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}

<div class="foo"></div>

I don't want the edges to be jagged. I have tried using -webkit-backface-visibility: hidden here but there's no luck. I know there is a property called -webkit-font-smoothing where we can set the font-smoothing as antialiased. Is there any way that we can set antialiased for a div?

Screenshot 2

Lastly, this is not a solution of my problem and I would like to avoid using this workaround as I'll have to go through and calculate the parameter values of scale3d() manually.

I am expecting the solution of first case here.

Answer 1

Yes, there is a fix, make the element big and scale to smaller at the initial state. Then on hover scale to 1, and now it's very smooth and not pixelated.

.foo {
    background: #4FC093;
    display: block;
    position: absolute;
    width: 200px;
    height: 200px;
    box-shadow: 0 0 10px inset;
    margin: 0 auto;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    cursor: pointer;
    -webkit-transition: all 3s ease;
    -moz-transition: all 3s ease;
    -ms-transition: all 3s ease;
    transition: all 3s ease;

    -webkit-transform: scale(.20);
    -moz-transform: scale(.20);
    -ms-transform: scale(.20);
    transform: scale(.20);
}

.foo:hover {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}