20

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
  • 321
  • 1
  • 2
  • 8

8 Answers8

28

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

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

and you would be fine.

user2648599
  • 299
  • 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,604
  • 4
  • 25
  • 37
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,667
  • 8
  • 38
  • 69
5

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
  • 210
  • 2
  • 9
3

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
  • 473
  • 4
  • 9
  • 1
    This worked on an element that wasn't being animated for me – Daniel_Knights Jul 02 '21 at 08:24
  • The very first line of this article states " This only applies to scaling that happen via JavaScript manipulation, and does not apply to CSS animations." So not sure how this is relevant to the question – Daniel Cooke Jan 11 '23 at 10:31
  • @DanielCooke Apparently mozilla documentation states, "The will-change CSS property hints to browsers how an element is expected to change. Browsers may set up optimizations before an element is actually changed. These kinds of optimizations can increase the responsiveness of a page by doing potentially expensive work before they are actually required". will-change is available as CSS property, if it only works with javascript why would they make it available to css, try it. If it doesn't work for your case, try other solution online. – Dale Ryan Jan 11 '23 at 13:11
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
2

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

Anton
  • 41
  • 1
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
  • 59
  • 1
  • 2