[Solved] Transforms cause font-smoothing weirdness in Webkit

[nerdland]

<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?

[nerdland]

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.

[Smitty]

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;

[nerdland]

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.

[nerdland]

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?

[Smitty]

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

[nerdland]

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

[TheDoc]

I’ve used the translate3d hack before as well.

[nerdland]

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

[nerdland]

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

[nerdland]

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.

[artinruins]

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);
}

[zoltan]

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.

[joaomvfsantos]

@Smitty I could kiss you man!!

[WebDevJoshB]

Did you ever find a fix from any of the feedback?

[Author]

Posts