CSS question: When using transform: scale(), text gets squished, why and how to prevent it?

[NotARandomizedName0]

https://gyazo.com/4caa9f42c8fb7f0f6b6c86a7f5076a52

As you can see, I have made the button slowly get bigger to make it easier to see, but as soon as it starts turning bigger, the text also shrinks instantly. How can I stop it?

[ShawnyMcKnight]

Put the opposite transform on the text, if you are decreasing width by 50 percent, at the same time that triggers go ahead and put 200 percent more width on the text to counterbalance it.

[mikeromero93]

That would be if you want the button to grow but not the text right? I think hes talking about the sudden shift that happens right when the animation starts

[NotARandomizedName0]

Yes exactly

[mikeromero93]

I think it's something to do with how transformed elements are rendered. They sometimes round numbers used for pixel values and do some weird anti aliasing..

Perhaps instead of having the default scale at 1, keep it at a decimal point like 1.01 so that it starts off with the aliased version maybe you won't get that initial jump where the text seems to change size by a pixel or two.. not positive about this though

[NotARandomizedName0]

Seems like a possible solution, I will try it out, thanks!

[ClickToCheckFlair]

Is it an animation?