Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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 pixelated div with transition

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

using scale3d with reverse formula

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.

like image 261
aniskhan001 Avatar asked Aug 31 '14 08:08

aniskhan001


People also ask

Does transform interfere with other elements or layout of a webpage?

For elements whose layout is governed by the CSS box model, the transform property does not affect the flow of the content surrounding the transformed element.

What does WebKit transform do?

The CSS -webkit-transform property enables web authors to transform an element in two-dimensional (2D) or three-dimensional (3D) space. For example, you can rotate elements, scale them, skew them, and more.

What does transform scale do?

The scale() CSS function defines a transformation that resizes an element on the 2D plane. Because the amount of scaling is defined by a vector, it can resize the horizontal and vertical dimensions at different scales. Its result is a <transform-function> data type.


1 Answers

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);
}
like image 122
Mazhar Ahmed Avatar answered Oct 08 '22 08:10

Mazhar Ahmed