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

Answer 2

It will be a little more work, but you may want to consider not using scale.

If you're planning on resizing css shapes, you may be able to get away with just transitioning the attributes you used to draw the shapes and using a wrapper div for positioning.

Working Example

html:

<div class="row"> <!-- use a parent div to create rows -->
    <div class="wrap"> <!-- use a wrapper to position -->
        <div class="foo"></div>
    </div>
    <div class="wrap">
        <div class="foo"></div>
    </div>
    <div class="wrap">
        <div class="foo"></div>
    </div>
    <div class="wrap">
        <div class="foo"></div>
    </div>
    <div class="wrap">
        <div class="foo"></div>
    </div>
    <div class="wrap">
        <div class="foo"></div>
    </div>
</div>
<div class="row">
    <div class="wrap">
        <div class="foo"></div>
    </div>
    <div class="wrap">
        <div class="foo"></div>
    </div>
    <div class="wrap">
        <div class="foo"></div>
    </div>
</div>

css:

.wrap {
    position: relative;
    height:20px;
    width:20px;
    display: inline-block;
}
.foo {
    position: absolute;
    top: 190px;
    left: 190px;
    background: #4FC093;
    display: block;
    width: 20px;
    height: 20px;
    box-shadow: 0 0 10px inset;
    border-radius: 50%;
    cursor: pointer;
    transition:all 3s ease;
    z-index: 99;/*using an unnecessarily large z-index makes for a nicer transition in Chrome*/
}
.foo:hover {
    top: 0px;
    left: 0px;
    width: 400px;
    height: 400px;
    box-shadow: 0 0 200px inset;
    transition:all 3s ease;
    z-index: 1;
}

Answer 3

I think the only solution to this is to initially scale down the element and then scaling it to normal size how Mazhar Ahmed already answered.

If you don't want to calculate the size manually, you could just use CSS variables like this:

--scale:0.1;

.element{
  width: 40px * (1 / var(--scale));
  height: 40px * (1 / var(--scale));
  transform: scale(var(--scale));
}

.element:hover{
  transform:scale(1);
}

As you can see, you only define the scale factor in a variable. CSS does the rest and sets the width and height accordingly.
So in our case the element would be 400x400px, but it's scaled down, so it appears to be 40x40px as defined in our CSS.

Just a small addition for the lazybones (like me).