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

Improve this question
8
  • 1
    -webkit- renders in FF and IE?
    – Kyle
    Commented Feb 22, 2011 at 12:39
  • using: -ms-filter and -moz-transform
    – davivid
    Commented Feb 22, 2011 at 12:40
  • 1
    Aha ok :) jsfiddle.net/Kyle_Sevenoaks/RGRey looks the same to me in FF and Chrome, is Chrome zoomed?
    – Kyle
    Commented Feb 22, 2011 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
    Commented Feb 22, 2011 at 12:53
  • 1
    possible duplicate of css transform, jagged edges in chrome
    – Frank van Puffelen
    Commented Apr 25, 2013 at 13:15

9 Answers 9

Reset to default
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.

Improve this answer
2
  • 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
    Commented Aug 26, 2012 at 16:10
  • This solution may cause transparent "dead" pixels in the rotated image if you rotate it back and forth.
    – Kamil Szot
    Commented Jun 3, 2013 at 9: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.

Improve this answer
5
  • ok thanks, originally I did have borders but was hoping not to have them, it does reduce effect the somewhat though
    – davivid
    Commented Feb 22, 2011 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
    Commented Feb 22, 2011 at 15:20
  • In the last comment here 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)
    – user822159
    Commented May 24, 2012 at 6:05
  • could -webkit-transform: translateZ(0px); give any compatibility problems with other browser? @Julio
    – Bakaburg
    Commented Aug 28, 2012 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
    Commented Aug 29, 2012 at 10:02
7 
-webkit-transform: rotate(-5deg) translate3d( 0, 0, 0);

Does the trick for chrome.

Improve this answer
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);.

Improve this answer
1
  • no I hadn't tried, but it doesn't seem to have any noticeable effect. cheers though.
    – davivid
    Commented Feb 22, 2011 at 13:17
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.

Improve this answer
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
    Commented Sep 16, 2016 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.

Improve this answer
2
  • 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
    Commented Dec 7, 2012 at 13:23
  • Chrome 33, Windows 7 - still an issue... Please see my answer.
    – user651390
    Commented Apr 5, 2014 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/

Improve this answer
1
  • 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
    Commented Sep 17, 2015 at 10:32
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.

Improve this answer
1
  • 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
    Commented Apr 24, 2011 at 21:47
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.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.