CODEWITHSUNDEEP
jquerycsstransformantialiasing
FlavorScape
FlavorScape

Reputation: 14319

CSS + jQuery Transform plugin: how to fix blurry text

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.

On the left when at rest, on the right first 500 ms 

    /* 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.

Upvotes: 3

Views: 2211

Answers (1)

jdunham
jdunham

Reputation: 439

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;

Upvotes: 1

Related Questions