Antialiased Text in Firefox After CSS Rotation

Antialiased text in Firefox after CSS rotation

For whatever reason, it seems under some circumstances browsers "forget" to antialias text while doing complex transforms.

The fix:

Using CSS to force the browser to render the transformed element in a separately-composited "layer" is one solution:

transform: rotate(…) translate3d(0px,0px,1px);

The explanation:

Many rendering engine implementations create a GPU layer for the 3d-transformed element, and composite it onto the rest of the page when painting. This alternate rendering path can force a different text-rendering strategy, resulting in better antialiasing.

The caveat:

However, this is a bit of a hack: first, we're asking for a 3-dimensional transform we don't really want; second, forcing many unnecessary GPU layers can degrade performance, especially on mobile platforms with limited RAM.

dev.opera.com hosts a good discussion of compositing, hacks using transform3d, and the CSS3 will-change property.

Wonky text anti-aliasing when rotating with webkit-transform in Chrome

Try triggering the CSS 3d Transform mode with webkit. this changes the way chrome renders

-webkit-transform: rotate(.7deg) translate3d( 0, 0, 0);

---

edit

There also a Webkit only style declaration -webkit-font-smoothing which takes the values

• none
• subpixel-antialiased
• antialiased

where subpixel-antialiased is the default value.

Alas, the subpixel antialias is no good solution for rotated text. The rendering machine cant handle that. The 3d transform switches to just antialiased. But we can try to set it directly.

See here http://maxvoltar.com/archive/-webkit-font-smoothing

Css rotated text is jaggy

Chrome doesn't enable anti-aliasing by default. But you can add this CSS property to your elements in order to enable it:

-webkit-backface-visibility: hidden;

Fiddle

How can I force rotated text to anti-alias correctly in Chrome on Windows?

After further investigation it appears that the font rendering looks ok on all angles of rotation except for 90 and 270 degrees. Altering this by .1 degree seems to be sufficient to fix the rendering of the text.

ie.

transform: rotate(270.1deg)

---

Related Topics