CSS Rotate Transform Blurs Text

Question

I am rotating a div a small amount, but want the text inside to be straight.

I have used the following...

.content {
  padding:20px;
  background:#F9ECDA;
  transform:rotate(-2deg);
  -ms-transform:rotate(-2deg);
  -webkit-transform:rotate(-2deg);
  -webkit-backface-visibility: hidden;
}

.contentinner {
  transform:rotate(2deg);
  -ms-transform:rotate(2deg);
  -webkit-transform:rotate(2deg);
}

Note that I have used -webkit-backface-visibility: hidden; to combat the Anti Aliasing issues (jagged edges) i was experiencing in Chrome. The problem with this, is that it blurs all of my text.

Take a look at this in Chrome... http://jsfiddle.net/Collins405/a9qnmp5k/

Is there any tricks to stop the text blurring?

I considered making the background div a psuedo :before, but as its in Drupal, the content will need to adjust the height depending on how much content my client enters, and a :before element wont do that.

EDIT: Also happening in Opera, but pretty good in FF

This is a possible duplicate of http://stackoverflow.com/questions/8024061/webkit-blurry-text-with-css-scale-translate3d — James Donnelly, Aug 07 '14 at 09:02

score 0 · Accepted Answer · answered Aug 07 '14 at 09:16

0

use -webkit-backface-visibility: hidden; also in .contentinner

answered Aug 07 '14 at 09:16

Davide Rossi

73
11

Yeah that is a bit better! But its still not as crisp as it is if you remove the -webkit-backface-visibility: hidden; from both classes. :( – Collins Aug 07 '14 at 09:19
yeah but the original problem in the question, is that removing all makes the div container have a jagged edge. I need a smooth edge on the .content div, but crisp text in the .contentinner – Collins Aug 07 '14 at 09:41
If you see my screen I don't see jagged edge :) – Davide Rossi Aug 07 '14 at 09:45
oh! In JS Fiddle, If i remove both, then i see a smooth edge too!, but on my site, the edge is all jagged! Same browser, same CSS. What the hell? :-/ – Collins Aug 07 '14 at 10:09
Ah well, your method makes the text legible enough to pass, and its much better than it was before, so ill mark it as the answer. Cheers for your help! – Collins Aug 07 '14 at 10:11

CSS Rotate Transform Blurs Text

1 Answers1