Why is transitioning font-size so choppy in Chrome?

Question

When applying a CSS transition between two different font sizes, the resulting animation is smooth in Firefox, but quite choppy in Chrome.

div {
    font-size: 87.5%;
    padding: .5em;
    margin: .5em;
    transition: font-size .25s ease-in-out .25s, 
                padding .25s ease-in-out .25s, 
                margin .25s ease-in-out .25s;
}

div:hover {
    font-size: 100%;
}

Live demo: http://jsfiddle.net/B7Zyp/2/ (hover over the box with the blue border)

Why is that? Is there a way to make the animation smooth in Chrome?

Answer 1

Chrome currently doesn't use DirectWrite for font rendering on Windows. Text isn't anti-aliased and as such font-sizes are rounded (to the nearest integer?).

They are working on it though. See this comment on the related bug ticket and especially the attachment:

If you enable DirectWrite with the proper flag, it should smoothly animate.