Is there any way to get rid of visual errors produced by scaling text?

Question

Here is what I mean:

div {
  
  background-color:rgb(240,160,100);
  border-radius:4px;
  font-family:arial;
  font-size:15px;
  width:150px;
  text-align:center;
  cursor:pointer;
  }

div:active {
  
  transform: scale(0.98, 0.95);
  
  }

<div>Click Here!</div>

So when you click the button, depending on the browser, various things happen. Like the dot on the 'i' jumping around or some letters getting smushed together or sometimes the whole text moves by a pixel.

In case of small transforms like that, what happens to the text is disproportionate to what happens to the rest of the element. I think this might be caused by whatever resampling algorithm the browser is using that is designed to be quick and crisp? I'd be ok with slight blurring if there's an option for that.

So, short of transforming all the button text into bitmaps and scaling those, is there any way around these effects?

If this describes your situation, http://stackoverflow.com/questions/6411361/webkit-based-blurry-distorted-text-post-animation-via-translate3d , you could use the __ or you could try translate3d( 0, 0, 0) as suggested by Smitty at https://css-tricks.com/forums/topic/transforms-cause-font-smoothing-weirdness-in-webkit/ — neallred, Feb 23 '16 at 04:32

score 0 · Answer 1 · answered Feb 23 '16 at 04:27

From what i understood I think you could try adding transition to smoothen the process. Or You can try using svg. if you only wanna scale the font than try changing font-size and add transition to it. I hope this helps

div {
  
  background-color:rgb(240,160,100);
  border-radius:4px;
  font-family:arial;
  font-size:15px;
  width:150px;
  text-align:center;
  cursor:pointer;
transition: all 0.3s ease;

  }

div:active {
  
  font-size:14px;
  
  }

<div>Click Here!</div>

Is there any way to get rid of visual errors produced by scaling text?

1 Answers1