18

I'm building a website with a wrapper div that is rotated (transform:rotate(10deg)). The text inside the div also rotates. I want the text straight, so I rotate it back (transform:rotate(-10deg)). The text is straight again, but this causes blurry text in Chrome (latest version, mac). I tried:

-webkit-transform: rotate(.7deg) translate3d( 0, 0, 0);
-webkit-backface-visibility: hidden;
-webkit-font-smoothing: antialiased; (and other)
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateZ(0deg);

It al didn't didn't solve the problem..

JSFiddle: http://jsfiddle.net/D69d4/10/

The weird thing is: it works perfectly in the jsfiddle.. But not on the actual website. When I add -webkit-backface-visibility: hidden; inside my style, the blurry text in Safari turns out sharp again, but in Chrome there is no difference. (I almost think it is making it worse in Chrome) (FF works fine)

I hope someone can help me with this, or give me a explanation what is going wrong.

Amber
  • 301
  • 1
  • 2
  • 8

8 Answers8

26

It happens in Webkit browsers such as Chrome and Safari. Try adding:

-webkit-transform-origin: 50%  51%;

and you would be fine.

user2648599
  • 279
  • 3
  • 4
  • 8
    It works. In my case, `-webkit-transform-origin: 50% 53%;` gives a better result. – aztack Apr 11 '14 at 03:12
  • 1
    In my case, `-webkit-transform-origin: 52% 50%;` works for me .. Just adjust the transform-origin and see if it will fit in the position that you wanted to achieve. – davecar21 Mar 19 '18 at 03:46
10

try adding and check if this works (as a hack):

transform: translateZ(0);
KrishnaDhungana
  • 2,444
  • 4
  • 23
  • 35
7

This worked for me.

zoom: 1.005;

Hope this helps you too.

This will make your content a little bit big but the blur problem will be solved. Hope this was helpful for you.

Jithin Raj P R
  • 6,427
  • 8
  • 36
  • 67
4

Also got blurry text issue while trying to rotate cards using transform rotateY.

Found this helpful fix: Rasterization and will-change: transform

Simply use the will-change css property with transform value on the element that you expect to animate using transform.

will-change: transform;

Here is the my updated css code:

.scene {
    perspective: 1600px;
}

.card {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 1s;
    transform-style: preserve-3d;
    will-change: transform;
    -webkit-font-smoothing: antialiased;
}

.card__face {
    position: absolute;
    height: 100%;
    width: 100%;
    backface-visibility: hidden;
    will-change: transform;
    -webkit-font-smoothing: antialiased;
}

.card__face--front {

}

.card__face--back {
    background-color: white;
    transform: rotateY( 180deg );
}

.card.is-flipped {
    transform: rotateY(180deg);
}
Dale Ryan
  • 164
  • 8
3

For anyone who is still running into this issue, despite having tried the previous suggestions:

I have found that if you put a perspective property on the parent element being rotated, it completely fixes the issue. The value can be anything above 0, assuming you're not using any 3d transforms.

Example CSS:

.parent {
    transform: rotate(10deg);
    perspective: 100px;
}

.child {
    transform: rotate(-10deg);
}
Andrew Rubin
  • 170
  • 7
2

It could happen if your point of rotation falls between pixels. To avoid it you can try to move the origin a bit or make sure the element being rotated has odd dimensions.

Kirill Shabunov
  • 121
  • 4
1

Nothing worked for me among these answers. Doing hit and trial, removing bottom: 30% on my position: fixed element and replacing it with top: 60% did the trick. Give it a try.

Kunal Mittal
  • 19
  • 1
0

I used transform:rotateY(180deg) and my text was blurry. I replaced it with transform: scale(-1, 1) and it worked for me.

Anton
  • 21
  • 1