Antialiased text in Firefox after CSS rotation

Question

so I\'ve read a lot about the current state of rotating text and not being abl

Answer 1

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.

Answer 2

Jeremy if you come back and answer this I can give the answer to you. just realized I hadn't had an answer to this so I needed to put something here.

This solution worked as in the comments above:

Jeremy: I had another thought: it could be related to creating an opengl/webgl layer behind the scenes. If you add translate3d(0px,0px,1px) after the rotate transform, does it "fuzz out" a bit more?

Answer - Yes this works to perfectly anti-alias any text in all browsers!