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
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.
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.
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.
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.
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);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With