Text blurs when using transition and scale Chrome and FireFox - css

Question

when I use both transition andtransform, then the animations are not very smooth on both chrome andfirefox. It blurs when you hover over it. The only browser on which it is normal is IE.
Chome / FireFox (Note the text, when the animation starts it start to be blurry. When it finishes it pops back to smooth letters.)
Desired result (This is working in IE)
How do I make these animations also smooth on chrome and firefox?
Snippet:
as soon as the transition is complete, the element has to be focused again. Thats what it looks like now on chrome and firefox.
button {
background-color: cornflowerblue;
border: 1px solid cornflowerblue;
font-weight: bold;
font-size: 14px;
color: #fff;
padding: 10px;
border-radius: 3px;
transition: all .33s ease-in-out;
}
button:hover {
transform: scale(1.1);
transition: all .33s ease-in-out;
}
<button>Hover me</button>

Answer 1

You can accomplish a very similar effect using font relative units (em) and increasing the element font-size on hover.
button {
font-size: .875em; /* =14/16 or whatever your base font size is */
padding: .625em; /* =10/16 */
border-radius: .1875em; /* =3/16 */
}
button:hover {
font-size: 1em; /* close enough to 1.1x */
}
Note this generally considered to be less performant than using transforms, at the very least try to position the element so that there are fewer re-flows around it.
Chrome 64 on Windows 10:
button {
background-color: cornflowerblue;
border: 1px solid cornflowerblue;
font-weight: bold;
font-size: .875em; /* =14/16 or whatever your base font size is */
color: #fff;
padding: .625em; /* =10/16 */
border-radius: .1875em; /* =3/16 */
transition: all .33s ease-in-out;
transform: translateX(-50%) translateY(-50%);
}
button:hover {
font-size: 1em; /* close enough to 1.1x */
transition: all .33s ease-in-out;
}
<span style="position: relative; left: 2.5em; top: 1em;">
<button>Hover me</button>
</span>

Answer 2

I managed to remove the blur on Firefox with:
Backface visibility hidden fixes the problem as it simplifies the animation to just the front of the object, whereas the default state is the front and the back.
backface-visibility: hidden;
or ( or both )
TranslateZ also works as it is a hack to add hardware acceleration to the animation.
transform: translateZ(0);

Answer 3

You can try if perspective can fix your issue, it fixes the text into it's z-axis, no technical idea why.
button {
background-color: cornflowerblue;
border: 1px solid cornflowerblue;
font-weight: bold;
font-size: 14px;
color: #fff;
padding: 10px;
border-radius: 3px;
transition: all .33s ease-in-out;
-webkit-perspective: 1;
perspective: 1;
}
button:hover {
transform: scale(1.1);
transition: all .33s ease-in-out;
}
<button>Hover me</button>

Answer 4

The best and so far only way I found which removes the blur effect is to scale down the element first, and then scaling it up to its original size.
Here's an example:
button {
background-color: cornflowerblue;
border: 1px solid cornflowerblue;
font-weight: bold;
font-size: 16px;
color: #fff;
padding: 20px;
border-radius: 3px;
transition: all .33s ease-in-out;
transform:scale(0.7);
}
button:hover {
transform : perspective(1px) scale(1);
transition: all .33s ease-in-out;
}
<button>Hover me</button>
I know this is not the desired result but I looked quite hard and didn't find anything better.