CSS + jQuery Transform plugin: how to fix blurry text

Question

So I've got an odd situation.

I've had to scale up a whole bunch of content using the scale plugin, which I suppose uses css 3 transforms.

When I click on a button that animates a layer beneath the text, I get a "flash" of crisp anti-aliased text (Actually, I hide/reveal text at this time, too). Then about 500 ms later, all the text goes back to being blurry. I can repeat this over and over. The REALLY WEIRD PART is that it goes back to being blurry before the under-layer finishes animating. Now, I would expect that if this is a "delay in adding the transform" then the new text would not be the "correct" size at first, but it is correct at the beginning.

    /* I've added this, too:*/
        -webkit-font-smoothing: subpixel-antialiased;

    /* also tried */
        -webkit-transform-style: preserve-3d;

    // the basic implementation of the transform using jQuery 2D transform plugin
    $("#container").transform({
        origin: ['50%', '0px'], 
        scaleX: _scaleY,
        scaleY: _scaleY
    });

   // tried this too, but doesn't seem to do anything at all
   $('#container').animate({
       transform: 'scale(' + _scaleY + ')',
       time:.5
   });

EDIT Seems like chrome only.

Answer 1

I had a similar issue in Chrome/Safari on a css transform of a background layer and adding the font smoothing property worked in Chrome 37.

-webkit-font-smoothing: antialiased;