Grow your CSS skills. Land your dream job.

[Solved] Transforms cause font-smoothing weirdness in Webkit

  • # July 13, 2012 at 12:18 pm

    <h3>Update:</h3>
    I just confirmed that it IS a CSS issue. Here’s a reduced test case: http://jsfiddle.net/VazpN/
    Is there ANYTHING I can do other than forcing standard anti-aliasing on EVERY element on the page?
    To be clear, I know there are other ways to get the effect. (Using margin-left rather than transform, etc.) I’m wondering if there’s a way to fix this AND use transforms.

    <h3>Original message:</h3>

    So, I’ve noticed problems similar to this for a while, but it has now manifested itself on my own website. You can see it by going to our site at http://www.socialforces.com or by checking out Wufoo’s site at http://www.wufoo.com. I’ve seen it in other places, but Wufoo is the only other one I can think of offhand.

    Basically, certain JavaScripts seem to cause crazy font smoothing stuff to happen. On Wufoo’s site, they’ve got an image slider/fader at the top of the page, but every time it changes to a new slide, ALL of the text on the page temporarily changes to antialiased font-smoothing. (Rather than subpixel-antialiased) It causes a really jarring experience because if you’ve scrolled down below the image slider, All of the text is basically “blinking” between antialiased and subpixel antialiased every few seconds.

    This is happening on my site now, too. Oddly enough, it was happening on WuFoo’s site for a while before I saw it happen on my site, but alas, it is there now.

    Is there ANYTHING I can do to fix this? (Other than change ALL the text on the page to antiliased — something I’d rather not do.) Has anyone experienced a similar problem?

    # July 13, 2012 at 12:20 pm

    Not sure if this belongs in “CSS Combat” or “JavaScript Jungle,” since it seems to encompass both, so I apologize if I’ve miscategorized this.

    # July 13, 2012 at 1:32 pm

    This has to do with webkit and css. Webkit for whatever reason likes to make the fonts swap from subpixel to standard antialiasing when doing css transforms. Personally, I’ve found the best way to fix this is to force standard antialiasing on the element which is being transformed.

    To do this, put this on your element you need to style.

    -webkit-font-smoothing: antialiased;
    # July 13, 2012 at 1:35 pm

    Yeah, that’s what I’m hoping to avoid. I would be less concerned if it were only the moving element that is swapped to standard antialiasing. The biggest problem is that the WHOLE PAGE is swapped to standard antialiasing when the thing moves.

    # July 13, 2012 at 1:36 pm

    I actually just had somewhat of a breakthrough. I was able to pinpoint exactly what causes this behavior in the script I’m using, and it is entirely a CSS issue. Here’s a reduced test case:

    http://jsfiddle.net/VazpN/

    Is there anything I can do to keep Webkit from forcing standard antialiasing on EVERYTHING?

    # July 13, 2012 at 2:02 pm

    It appears if you set your transforms to also use

    translate3d( 0, 0, 0)

    it can fix it, but it does cause fonts to be a bit blurry on rotate/transform. See here: http://codepen.io/WillsonSmith/pen/4/2

    # July 13, 2012 at 3:01 pm

    I’m not sure what that’s supposed to be doing, because the same issue appears to be happening. (I’m using Chrome 20.0.1132.57 with OSX Lion.)

    http://codepen.io/pen/11208/1

    # July 13, 2012 at 3:04 pm

    I’ve used the translate3d hack before as well.

    # July 13, 2012 at 3:09 pm

    Am I seeing something different than the rest of you? The text above the transformed element is still using standard antialiasing while the element transforms, isn’t it?

    http://codepen.io/pen/11208/1

    # July 14, 2012 at 1:35 pm

    Is “bumping” frowned upon here? Still can’t figure out this font rendering issue.
    Again, you can see the problem illustrated here:
    http://jsfiddle.net/VazpN/

    http://codepen.io/pen/11208/1

    # July 14, 2012 at 7:59 pm

    I have also determined that this issue only happens in OS X. Doesn’t happen on Windows. Not sure about Linux, but I would guess not.

    # July 1, 2013 at 2:58 pm

    I had a similar issue with a page of mine. A simple `:hover { transform: scale(1.1); }` effect was being applied to a button and the text went blurry during scaling, then snapped back to a crisper anti-alias when it stopped (in Safari and Chrome).

    Before using `translate3d(0,0,0)`, in Chrome, the whole background color shifted as the transition happened as well. Very infuriating.

    I added `translate3d(0,0,0)`to the hover effect, as well as `backface-visibility` and that seems to help, though now, the final frame of the effect stays blurry. Better than having the text re-render on animation end, but not great.

    http://dev.projectevolution.com/gunsho/item-store.php and hover on the Purchase button.

    Here is the rendered CSS (from Compass) after getting rid of the duplicate vendor rules:

    .purchase-button {
    transition: 0.3s all ease-in-out;
    transform-origin: 50% 50% 50%;
    backface-visibility: hidden;
    }
    .purchase-button:hover, .purchase-button:focus {
    transform: scale(1.1) translate3d(0,0,0);
    }

    # May 5, 2014 at 12:44 pm

    I have a fix for this. Instead of of just using:

    transform: scale(1.1)
    

    use:

    transform: perspective(1px) scale(1.1)
    

    This will fix this issue in Firefox, Chrome and Safari. You should not put the perspective(1px) transform on the -ms-transform or -o-transform properties, since they don’t recognize perspective().

    I wrote a blog post about this that covers off these issues and more:

    http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/

    Hope this is of some use.

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".