How do I get Chrome to apply font smoothing during FadeIn()?

Question

I have a large title I wish to fade in gradually after the page loads. I'm using the following jQuery code snippet to make this happen.

$('#primary').fadeIn(1000);

However, during the transition Chrome seemingly does not apply anti-aliasing (or font smoothing) until the effect is finished. This produces a noticeable jerk after the fade in ends and font smoothing is applied. IE, Firefox and Safari all work fine.

It's the difference between this...

And this...

This can be seen here: http://jsfiddle.net/68Bmd/

Any ideas on how I can get Chrome to apply font smoothing during the fade in?

PS I'm aware I can disable font smoothing. This removes the jerk, but it leaves the fonts looking terrible.

Answer 1

I tried to put a shadow in front of the title and fade that out, and it seems to work.

the html:

<div id="container">
    <div id="shadow"></div>
    <h1 id="primary">This is a Title</h1>
</div>

and the css:

#shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: #fff;
}

http://jsfiddle.net/57x88/1/

Answer 2

Here's a CSS solution using animation. Note, if using in Chrome, you'll need to add browser prefix.

@keyframes fade-in {
    from {
        color: #fff;   
    }

    to {
        color: #000;
    }
}

#primary {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 100px;
    animation: fade-in 1s linear;
}