Shaky text when using transform scale

backface-visibility: hidden; let the situation better, but the text rendering remains weird (crispy at Firefox, Blurry on Chrome). This problem becomes smaller (mainly on Chrome) removing the padding and using a bigger line-height instead:

.button {
  background: tomato;
  width: 100px;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  text-align: center;
  line-height: 1.8em;  
}

.button:hover {
   -webkit-transform: scale(1.25);
   -moz-transform: scale(1.25);
   -o-transform: scale(1.25);
   -ms-transform: scale(1.25);
   transform: scale(1.25);
}
<div class="button">Test Button</div>


Just an FYI for people with shaky/jittery images with transform: scale(1.05) on :hover on Firefox, this fixed my problem. 

transform: scale(1.05) rotate(0.02deg);

So it's totally a fake rotate Firefox hack that stops this glitchy image scale effect.

Tags:

Css

Recent Posts