Wonky text anti-aliasing when rotating with webkit

问题:

I'm rotating an element using -webkit-transform: rotate() and in Chrome 14.0.835.2 dev-m it's doing some really weird stuff to the text inside the element. It reminds me of a similar effect you get in Photoshop when you rotate text using "smooth" anti-aliasing instead of "crisp".

Anyone know what's going on here? Is it specific to this webkit or Chrome version or is there something I can do to fix it? (It's also not anti-aliasing the borders between list elements)

Here's the CSS:

div.right-column.post-it
{
  position: relative;
  width: 240px;
  background-color: #fe9;
  padding: 20px;
  -webkit-transform: rotate(.7deg);
  background: #fe9 -webkit-gradient(radial, 20% 10%, 0, 50% 10%, 500, from(rgba(255,250,220,1)), to(rgba(255,238,253,0)));
  box-shadow: 1px 1px 0 #ddccaa, 
            2px 2px 0 #dbcaa8,
            3px 3px 0 #d9c8a6,
            4px 4px 0 #d7c6a4,
            5px 5px 0 #d5c4a2,
            6px 6px 1px #d3c2a0,
            4px 4px 2px rgba(90,70,50,.5),
            8px 8px 3px rgba(90,70,50,.3),
            12px 12px 5px rgba(90,70,50,.1);
}

回答1:

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

回答2:

The blurred fonts are caused by a weird webkit issue invloving -webkit-backface-visibility. This took me forever to figure out, and I haven't seen it anywhere else on the web yet.

I now add -webkit-backface-visibility: hidden; to the body of my site as a CSS reset style. Watch it sharpen the fonts on your entire site, its amazing. You're transformations are not 3d so this wont affect anything anyway, but if you do decide to do 3d transformations somewhere else on your site just add back -webkit-backface-visibility: visible; to the specific element. Should also fix the flickering too.