33

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)

Wonky text

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);
}
Improve this question
3
  • 2
    font seems to be antialiased, but before the transform is applied. The transform doesn't seem to antialias. Have you tried rotating it a bit more than just .7deg? Other seem to have somewhat similar issues stackoverflow.com/questions/5078186/…
    – Gerben
    Commented Jul 27, 2011 at 16:09
  • Changing the rotation does nothing unfortunately. The effect still happens.
    – Rahul
    Commented Jul 28, 2011 at 0:53
  • cssdeck.com/labs/full/ornh3chv
    – davidcondrey
    Commented Oct 6, 2014 at 7:01

2 Answers 2

Reset to default
74

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

Improve this answer
3
  • I think we can not do anything about that. Try a bold or not bold font with color black maybe
    – yunzen
    Commented Sep 21, 2011 at 8:49
  • Add a background-color to the text element.
    – lightyrs
    Commented Jan 9, 2012 at 7:51
  • The translate3d method worked for me but yes it blurs the text a bit. The direct editing of the -webkit-font-smoothing property didn't work for me though. You do sacrifice the crispness of the text with this approach but overall I think it looks better than wonky text
    – alvinc
    Commented Dec 12, 2015 at 21:32
17

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.

Improve this answer
6
  • 3
    Don't do this. What this is effectively doing is activating -webkit-font-smoothing: antialiased on your entire page, which is actually a step back from the default -webkit-font-smoothing: subpixel-rendering. See Please Stop "Fixing" Font Smoothing for more background.
    – Rahul
    Commented Dec 11, 2012 at 12:21
  • I see what you're saying, but the visible result is unbelievably better. Mobile devices do not use sub-pixel rendering anyway, so this doesnt affect them. This also fixes the flashing, which is a huge issue and in my opinion something that you simply can't live with. Can you suggest a better way to stop both the flashing and render the fonts correctly? Furthermore, you can explicitly define -webkit-font-smoothing: subpixel-rendering;
    – DMTintner
    Commented Jan 1, 2013 at 17:19
  • Perhaps you should post a new question with those points so that they can be answered separately, I think they're off-topic for the comments here.
    – Rahul
    Commented Jan 1, 2013 at 17:21
  • Perhaps, but I believe that users who now visit this question will also want to know the answer. You didn't offer any sort of solution to the problem, just said that my solution was incorrect. Moreover, the case for sub-pixel rendering is still a matter of opinion. Many browsers and OS do funky things with sub-pixel rendering and can hurt the design. Sub-pixel rendering is also automatically turned off during css transformations, causing all sorts of issues. With the prevalence of css transformations in development today I see a strong case for using anti-aliased rendering globally
    – DMTintner
    Commented Jan 1, 2013 at 17:33
  • 1
    This seemed to work for me. I didn't see any change in the rest of the page's text rendering when it was applied to a specific element that was animated.
    – Kenneth Benjamin
    Commented Jan 16, 2013 at 17:59

Not the answer you're looking for? Browse other questions tagged or ask your own question.