为什么在Chrome中过渡字体大小如此不稳定？

Question

在两种不同的字体大小之间应用CSS过渡时,生成的动画在Firefox中很流畅,但在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%;
}

现场演示: http ://jsfiddle.net/B7Zyp/2/(将鼠标悬停在蓝色边框上)

这是为什么？有没有办法让Chrome动画流畅？

Answer 1

Chrome目前不在Windows上使用DirectWrite进行字体渲染.文本没有消除锯齿,因此字体大小被舍入(到最接近的整数？).

他们正在研究它.查看相关错误票证的评论,特别是附件:

如果您使用正确的标志启用DirectWrite,它应该平滑地动画.