Wonky Text Anti-Aliasing When Rotating with Webkit-Transform in Chrome

Wonky text anti-aliasing when rotating with webkit-transform in Chrome

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

Css rotated text is jaggy

Chrome doesn't enable anti-aliasing by default. But you can add this CSS property to your elements in order to enable it:

-webkit-backface-visibility: hidden;

Fiddle

webkit transform rotate Pixelated images in Chrome

You could check out the answer to the question css transform, jagged edges in chrome

Helped me out

From the accepted answer:

In case anyone's searching for this later on, a nice trick to get rid
of those jagged edges on CSS transformations in Chrome is to add the
CSS property -webkit-backface-visibility with a value of hidden.
In my own tests, this has completely smoothed them out. Hope that
helps.

Rotated text is breaking

I resolved this problem, thanks to showdev, by using

-webkit-transform: rotate(45deg) translate3d( 0, 0, 0);

That's because fonts are antialiased by default in chrome, and using translated3d(0,0,0) smoothens them.

More here : Wonky text anti-aliasing when rotating with webkit-transform in Chrome

Poor transitions result from fixing anti-aliasing

This was answered by Steve Adams in another question. I just had to change my -moz syntax:

From...

-moz-transition-property: rotate;
-moz-transition-duration: .17s;
-moz-transition-timing-function: linear;

To...

-moz-transition: -moz-transform 0.17s linear;

css transform, jagged edges in chrome

In case anyone's searching for this later on, a nice trick to get rid of those jagged edges on CSS transformations in Chrome is to add the CSS property -webkit-backface-visibility with a value of hidden. In my own tests, this has completely smoothed them out. Hope that helps.

-webkit-backface-visibility: hidden;

webkit font smoothing property has no effect in Chrome

https://productforums.google.com/forum/?fromgroups=#!topic/chrome/0vqp1bnkaoE

-webkit-font-smoothing no longer works. Google Chrome team intentionally changed this behavior. Seems font-smoothing wasn't applied "properly" on OSX in previous versions.

---

Related Topics