Font rendering issues when using CSS transitions in WebKit

A couple of days ago, I was messing about with CSS3 transitions and I noticed that, in Safari at least, text rendering gets messed up for the duration of the transition. WebKit uses sub-pixel anti-aliasing for font smoothing by default; apparently this gets disabled when a GPU-accelerated CSS transition is executed, causing the text to be rendered using “regular” anti-aliasing.

I haven’t found a satisfactory workaround. This Stack Overflow thread recommends using either -webkit-transform: translateZ(0px); or, curiously, explicitly setting sub-pixel smoothing (-webkit-font-smoothing: subpixel-antialiased) even though it should be enabled by default. Either way, you’ll end up with a) thinner (and uglier) fonts even before a transition or b) a slightly less noticeable change—but a change nonetheless—in font rendering during a transition. It’s not an ideal situation.

Feel free to comment on this post if you know of a workaround that eliminates the problem without one having to force regular anti-aliasing.

Update: I found the original bug report, first filed in 2009 (!): https://bugs.webkit.org/show_bug.cgi?id=23364

Leave a Reply

Your email address will not be published. Required fields are marked *