css transform, jagged edges in chrome

user_572635 0
Viewed 129336

I've been using CSS3 transform to rotate images and textboxes with borders in my website.

The problem is that the border look jagged in Chrome, like a (low-resolution) game without Anti-Aliasing. In IE, Opera and FF it looks much better because AA is used (which is still clearly visible but not that bad). I can't test Safari because I don't own a Mac.

The rotated photo and text itself look fine, it is only the border that looks jagged.

The CSS I use is this:

.rotate2deg {
    transform: rotate(2deg);
    -ms-transform: rotate(2deg); /* IE 9 */
    -webkit-transform: rotate(2deg); /* Safari and Chrome */
    -o-transform: rotate(2deg); /* Opera */
    -moz-transform: rotate(2deg); /* Firefox */
}

Is there any way I can fix this, e.g. by forcing Chrome to use AA?

Example below:

Jagged Edges example

transform antialiasing google-chrome css
12 Answers

I've tried all the solutions here and didn't work in my case. But using

will-change: transform;

fixes the jagged issue.

user_106987410

Adding the following on the div surrounding the element in question fixed this for me. 

-webkit-transform-style: preserve-3d;

The jagged edges were appearing around the video window in my case.

user_3593150
Related