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);
}
Rahul
  • 12,181
  • 5
  • 43
  • 64
  • 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 http://stackoverflow.com/questions/5078186/webkit-transform-rotate-pixelated-images-in-chrome – Gerben Jul 27 '11 at 16:09
  • Changing the rotation does nothing unfortunately. The effect still happens. – Rahul Jul 28 '11 at 00:53
  • http://cssdeck.com/labs/full/ornh3chv – davidcondrey Oct 06 '14 at 07:01

2 Answers2

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

yunzen
  • 32,854
  • 11
  • 73
  • 106
  • I think we can not do anything about that. Try a bold or not bold font with color black maybe – yunzen Sep 21 '11 at 08:49
  • Add a background-color to the text element. – lightyrs Jan 09 '12 at 07: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 Dec 12 '15 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.

DMTintner
  • 14,405
  • 5
  • 35
  • 32
  • 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](http://www.usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/) for more background. – Rahul Dec 11 '12 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 Jan 01 '13 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 Jan 01 '13 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 Jan 01 '13 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 Jan 16 '13 at 17:59
  • you can fix by normalizating the float pixel http://stackoverflow.com/a/42256897/1834212 – Miguel Apr 19 '17 at 16:54