Using css-transforms for scaling text on hover to another size is working smoothly in all browsers, except for Firefox. The font in the scaled element appears slightly unsharp initially, then sharpens after a few milliseconds.
You can test and see this issue in action on this example link.
Here's the HTML code:
<div class="container">
<div class="scale">
Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.
</div>
</div>
And here's the CSS code:
.container {
height: 300px;
width: 300px;
margin-left: 100px;
margin-top: 100px;
}
div.scale {
transition: 0.1s linear;
}
div.scale:hover {
transform: scale(1.5);
}
If anyone has any suggestions or solutions to fix this Firefox issue, it would be greatly appreciated!
Thank you in advance