Last Updated: September 09, 2019
· danielogden

Weird text anti-aliasing during a CSS3 transition on WebKit browser?

WebKit browsers like Chrome & Safari sometimes add an aliasing effect during a CSS3 transition.

It often looks like the text is made slightly narrower during the transition, then gets a little bolder once the transition has stopped.

Apply this style to the elements you see getting aliased:

-webkit-font-smoothing: antialiased;

That tends to eliminate the issue for me.