internet explorer not anti aliasing rotated image

Question

I have a div with a background image that I am rotating. Below is my css rules to rotate it:

#services_parallax { 
-webkit-transform:rotate(3.1deg); /* Webkit */
transform: rotate(3.1deg); /* firefox & IE9+ */
/* IE7 & 8 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.998537, M12=-0.054079, M21=0.054079, M22=0.998537, sizingMethod='auto expand'); 
}

The problem is in IE the edges of the image are very blocky and jagged instead of being smooth lines and don't appear to be antialiased. Does anyone know a fix for this? It was doing it in chrome until I applied the fix for it by applying -webkit-backface-visibility: hidden; which worked great for chrome, I just need a similar fix for IE if one exists.

To replicate this issue paste the following into an HTML file and look at it in IE:

<style type="text/css"> 
#services_parallax { -webkit-transform:rotate(3.1deg); /* Webkit */ 
    transform: rotate(3.1deg); /* firefox & IE9+ */ 
    /* IE7 & 8 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.998537, M12=-0.054079, M21=0.054079, M22=0.998537, sizingMethod='auto expand'); 
    background: url(http://img.netcarshow.com/Pagani-Zonda_R_2009_1600x1200_wallpaper_01.jpg) center center; 
    background-size:100% auto; 
    height:100px; 
    width:700px; 
    margin-top:50px; 
    margin-left:50px; 
} 
</style> 
<div id="services_parallax"></div>

please specify which IE versions are you having problems with? IE 7/8 (using `filter`) will work very differently from IE 9/10 (using `transform`). — Spudley, May 08 '13 at 11:45
can you also confirm that you're using real copies of each IE version, or whether you're using compatibility mode to do the testing? (again, for stuff like this, this may have an impact on the results you see) — Spudley, May 08 '13 at 12:49
I'm using the real IE10 to check IE10 and IE9 using compatibility mode. Then I'm using IE Tester for 7 & 8 — geoffs3310, May 08 '13 at 12:57
it's worth mentionin that IE10 *does* support `-ms-backface-visibility`. However, it's also worth saying that this property is intended for use with [3D rotation effects](http://css-tricks.com/almanac/properties/b/backface-visibility/), so if it makes a difference in Chrome on a 2D rotation, then it's probably more of a hack than a genuine solution. But if you're okay with hacks, you could try hacks like `opacity(0.9999)`. Another option would be to create the element as an SVG/VML image, which should be smoother to rotate in all browsers. — Spudley, May 08 '13 at 13:18
If you put the following in a HTML file and look at it in IE10 you will see what I mean: — geoffs3310, May 08 '13 at 13:23
please edit that into the question rather than posting code in the comments. — Spudley, May 08 '13 at 13:28

score 3 · Answer 1 · answered Dec 04 '13 at 11:28

3

Anti-aliasing don't work on large images if there are height and width forced with CSS (IE11, 10 and 9). I've make some (very) approximate tests and I deduct anti-aliasing works under 1000px.

I'm still looking for an official source for this issue.

answered Dec 04 '13 at 11:28

Fractaliste

5,777
11
42
86

score 2 · Answer 2 · edited May 23 '17 at 12:31

@geoffs3310, I feel your pain.

I have found this is still an issue with IE11, and some other browsers (Safari on iPad and on Chrome and the default browser on Samsung Galaxy Tab A). To work around this I whacked a dark background-color on the element containing the background-image. I don't know why, but it appears to do the trick, e.g.

background-color: black;

And in case anyone else reads this post, allow me to put forward a few other fixes I found in dealing with the various issues arising from skewing content. Note, these are all applied to the transformed container element.

Eliminates the jagginess buttons get after skew rotations are applied (kudos):

transform-style: preserve-3d;

Eliminate blurry where <canvas> has been used (kudos to Zoltan). Note, if there are other transforms on the element declare them on separate lines rather than shorthand (from memory this was to work around a similar Safari issue):

transform: perspective(0);

And another fix—though my documentation lacks what it fixes, I think it was to do with janky or blurry content in IE—try:

outline: 1px solid transparent;

score 1 · Accepted Answer · answered May 23 '13 at 10:13

1

To get round this issue i used box shadows which seemed to work and make the edges smooth

answered May 23 '13 at 10:13

geoffs3310

5,599
11
51
104

internet explorer not anti aliasing rotated image

3 Answers3