35

Using -webkit-transform: rotate(-5deg); on a container div, Chrome renders the grid of images with really jagged edges. Whereas in FF (-moz-transform:) and IE (-ms-filter:) everything looks OK - see the difference below.

Is there any thing I can do about this?

chrome ff

Spudley
  • 166,037
  • 39
  • 233
  • 307
davivid
  • 5,910
  • 11
  • 42
  • 71
  • 1
    -webkit- renders in FF and IE? – Kyle Feb 22 '11 at 12:39
  • using: -ms-filter and -moz-transform – davivid Feb 22 '11 at 12:40
  • 1
    Aha ok :) http://jsfiddle.net/Kyle_Sevenoaks/RGRey/ looks the same to me in FF and Chrome, is Chrome zoomed? – Kyle Feb 22 '11 at 12:42
  • no zooming, text and other elements all seem to be ok elsewhere - its just on images it seems - please see above – davivid Feb 22 '11 at 12:53
  • It looks like the webkit engine's Anti aliasing for transformed elements isn't finished, or is just unavailable. I'll see if there is a bug report for it. – Kyle Feb 22 '11 at 12:56
  • Workaround: apply -webkit-backface-visibility: hidden; to the element being rotated. Worked for me. – Dmitry Leskov Sep 28 '11 at 09:49
  • 1
    possible duplicate of [css transform, jagged edges in chrome](http://stackoverflow.com/questions/6492027/css-transform-jagged-edges-in-chrome) – Frank van Puffelen Apr 25 '13 at 13:15
  • this has a better solution http://stackoverflow.com/questions/6846953/wonky-text-anti-aliasing-when-rotating-with-webkit-transform-in-chrome use `-webkit-transform: rotate(-5deg) translate3d( 0, 0, 0);` instead of just `rotate(-5deg)` – Timo Huovinen Jul 02 '14 at 07:59

9 Answers9

74

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.

Community
  • 1
  • 1
Christian Westman
  • 2,985
  • 1
  • 26
  • 28
  • It works! They really should fix this bug, even though it is marked as 'fixed', it is clearly not due to the difference you notice when applying the css property mentioned above. – starbeamrainbowlabs Aug 26 '12 at 16:10
  • This solution may cause transparent "dead" pixels in the rotated image if you rotate it back and forth. – Kamil Szot Jun 03 '13 at 09:56
14

It appears to be an Antialiasing bug in the webkit engine. A report has been filed but is as yet unsolved.

You can try adding a border the same color as your background to try to minimise the effect.

Kyle
  • 65,599
  • 28
  • 144
  • 152
  • ok thanks, originally I did have borders but was hoping not to have them, it does reduce effect the somewhat though – davivid Feb 22 '11 at 13:19
  • in the original design a white css border helped a lot, but a black border didn't help so much in this version. But by giving the actual images files a 2px black border the problem is solved. – davivid Feb 22 '11 at 15:20
  • In the last comment [here](http://code.google.com/p/chromium/issues/detail?id=36902#c54) you can see that sending the element to through the GPU the get a workaround. You have to do something like this: rotate(90deg) translateZ(0) –  May 24 '12 at 06:05
  • could -webkit-transform: translateZ(0px); give any compatibility problems with other browser? @Julio – Bakaburg Aug 28 '12 at 23:25
  • Yes, -webkit- is the vendor prefix for browsers that run the Webkit engine, so Google Chrome, Safari and other Chromium browsers will accept this. You have to append the other vendor prefixes for it to work in other browsers. -moz- -o- and -ms- – Kyle Aug 29 '12 at 10:02
7
-webkit-transform: rotate(-5deg) translate3d( 0, 0, 0);

Does the trick for chrome.

Guido Gallenkamp
  • 191
  • 2
  • 3
4

Have you tried the CSS rule -webkit-transform-style: preserve-3d;?

You could also try rotating the specific axis with -webkit-transform: rotateZ(-5deg);.

Spudley
  • 166,037
  • 39
  • 233
  • 307
Luke Dennis
  • 14,212
  • 17
  • 56
  • 69
3

I encountered this issue on Chrome 33 (Windows 7). I tried all the suggested fixes on this page. Misery ensued. My rotation was pretty simple:

transform: rotate(40deg);
-moz-transform: rotate(40deg);
-webkit-transform: rotate(40deg);

I found this answer and after some quick experimentation I found that the following combination works perfectly in Chrome:

-webkit-backface-visibility: hidden;
outline: 1px solid transparent;

I haven't tested cross browser yet. I have no idea which further bugs this introduces. You have been warned. Hope this points someone in the right direction.

Side note: During my experiments I found that -webkit-backface-visibility: hidden; (on its own) removed the antialiasing from untransformed images.

Community
  • 1
  • 1
  • This works well. -webkit-backface-visibility fixes the issue however the pixellation is annoying. I'm unsure how the outline rule corrects the pixellation but I don't care. This is the best fix I've seen so far. – AJReading Sep 16 '16 at 12:58
2

This is a WebKit bug that has been already fixed and the fix shall appear in Chrome 15.

The workaround until everyone updates to 15+ is to apply -webkit-backface-visibility: hidden; to the element being rotated. Worked for me. That triggers antialiasing on the element.

remy
  • 1,511
  • 10
  • 15
Dmitry Leskov
  • 3,233
  • 1
  • 20
  • 17
  • 1
    This worked for me, looks like backface-visibility triggers the antialiasing As of Chrome 23 this bug is not fixed in Chrome on Windows 7 – remy Dec 07 '12 at 13:23
  • Chrome 33, Windows 7 - still an issue... Please see my answer. –  Apr 05 '14 at 13:35
1

You can add box-shadow to your images with the same color as your background, that reduce the effect.

example: http://antialiasing-webkit.qip.li/edit/

soufell
  • 66
  • 3
  • This is the only solution that fully stopped the pixelation when rotating an image in Chrome 47.0.2508.0 (latest dev build). Other answers listed here seem to make the issue worse,`backface-visibility: hidden` causes the image to have pixelated edges during the animation, and after the animation has been stopped. – sixones Sep 17 '15 at 10:32
0

For me it was the perspective CSS property that did the trick:

-webkit-perspective: 1000;

Completely illogical in my case as I use no 3d transitions, but works nonetheless.

Aron
  • 3,419
  • 3
  • 30
  • 42
0

This won't be appropriate for all uses, but where you have control over the markup and don't mind adding an extra <div>, you can make use of generated content to dramatically clean up the edges of rotated images in Chrome. This works because Chrome will apply anti-aliasing to the generated content placed over the image.

You can see an example here: http://jsfiddle.net/cherryflavourpez/2SKQW/2/

The first image has nothing done to it, the second has a border applied to match the background colour - not any difference that I can see.

The third image div has some generated content with a border placed around the edge. You lose a pixel around the edge, but it looks much better. The CSS is pretty self-explanatory. This has the advantage of not requiring you to create the border in your image, which seems like too big a price to me.

CherryFlavourPez
  • 7,529
  • 5
  • 45
  • 47
  • Apparently the latest Dev build of Chrome has regressed and this trick no longer works. Some more searching came up with this line: -webkit-transform-style:preserve-3d; Which seems to do the trick. – CherryFlavourPez Apr 24 '11 at 21:47