Why Is Text Getting Blurry and Wobbles During 2D Scale Transform

Why is text getting blurry and wobbles during 2d scale transform

Instead of using scale you can consider a translateZ with a perspective. Make sure to define the perspective initially to avoid the bad effect when moving the cursor fast:

.scalable{  transition: 0.3s ease-in-out;  box-shadow: 0 6px 10px rgba(0,0,0,0.14);  transform:perspective(100px);}
.scalable:hover {  transform:perspective(100px) translateZ(5px);  box-shadow: 0 8px 40px rgba(0,0,0,0.25);  }
.card {  width: 100%;  background: white;  padding: 20px;}
body {  width: 50%;   height: 100%;   background: #999;  padding: 20px;}

<div class="card scalable">  <div>here's some description</div></div>

Wobbly text on transform scale

So you've got multiple things going on here, and unfortunately it's going to require various things between browsers as you tackle some of the nuances of the measure / arrange passes, anti-aliasing, hardware acceleration, perspective, etc...

.mtw {  max-width: 200px;  margin:0 auto; }.mt .mp { text-align: center }.mt .mp .ma {  color: #fff;  font: 800 40px OpenSansBold, Arial, Helvetica, sans-serif;  min-height: 60px;}.mp { margin: 0 }.mt .header-blue {  background: blue;}.mt {  transition: all 0.4s linear;  backface-visibility: hidden;  -webkit-font-smoothing: subpixel-antialiased;}.mt:hover {  z-index: 1;  -webkit-transform: scale(1.1) translate3d( 0, 0, 0) perspective(1px);     -moz-transform: scale(1.1) translate3d( 0, 0, 0) perspective(1px);       -o-transform: scale(1.1) translate3d( 0, 0, 0) perspective(1px);      -ms-transform: scale(1.1) translate3d( 0, 0, 0) perspective(1px);          transform: scale(1.1) translate3d( 0, 0, 0) perspective(1px);}
/* --- cleaner way --- */#boom {  color: #fff;  background-color: blue;  font: 800 40px OpenSansBold, Arial, Helvetica, sans-serif;  min-height: 60px;  max-width:200px;  margin:0 auto;  text-align: center;  transition: transform 0.4s linear;  backface-visibility: hidden;  -webkit-font-smoothing: subpixel-antialiased;  will-change: transform;  }#boom:hover {   -webkit-transform: scale(1.1) translate3d( 0, 0, 0) perspective(1px);     -moz-transform: scale(1.1) translate3d( 0, 0, 0) perspective(1px);       -o-transform: scale(1.1) translate3d( 0, 0, 0) perspective(1px);      -ms-transform: scale(1.1) translate3d( 0, 0, 0) perspective(1px);          transform: scale(1.1) translate3d( 0, 0, 0) perspective(1px);}
/* --- Another way --- */#weee {  color: #fff;  background-color: blue;  font: 800 40px OpenSansBold, Arial, Helvetica, sans-serif;  min-height: 60px;  max-width:200px;  margin:0 auto;  text-align: center;  transition: font-size 0.4s linear;  backface-visibility: hidden;  -webkit-font-smoothing: subpixel-antialiased;  will-change: font-size;}#weee:hover {  font-size: 120px;}

<div class="mtw">  <div class="mt">    <div class="header-blue">      <h2 class="mp">        <span class="ma">49</span>      </h2>    </div>  </div></div>
<br/><br/>
Or, cleaner way....<div id="boom">50</div>
<br/><br/>
Or, an entirely different way...<div id="weee">51</div>

Transform scale slightly nudges Font Awesome icon

Use the SVG version instead and you won't have the issue. Scaling an SVG is better than scaling a text:

.container {  display: flex;  justify-content: center;  align-items: center;  width: 100%;  height: 100%;}
.parent {  display: flex;  justify-content: center;  align-items: center;  width: 100px;  height: 100px;}
svg {  cursor: pointer;  transition: transform 0.2s;}
svg:hover {  transform: scale(1.2);}

<script  src="https://use.fontawesome.com/releases/v5.13.0/js/all.js"></script>
<div class="container">  <div class="parent">    <i class="fa fa-eye" id="single-item-eye"></i>  </div></div>

Why Is Text Getting Blurry and Wobbles During 2D Scale Transform