Blurry text on transform:rotate in Chrome

Question

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.

Solution 1

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

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

and you would be fine.

Solution 2

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

transform: translateZ(0);

Solution 3

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.

Solution 4

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);
}

Solution 5

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);
}

View more solutions

Comments

[Martijn]

Might want to add that this activates hardware acceleration, which can make things faster

[Amber]

I already tried that (sorry made a mistake in my question -5 > 0) But thanks for the reply

[aztack]

It works. In my case, -webkit-transform-origin: 50% 53%; gives a better result.

[Backer]

This might be a hack, but it worked for me, so thanks

[davecar21]

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.

[Facundo Colombier]

wow! none of the others worked but this one, thanks for that!

[Jinxmcg]

hepls only in chrome for me not in firefox

[Daniel_Knights]

This worked on an element that wasn't being animated for me