CODEWITHSUNDEEP
htmlcssinternet-explorerrotationtransform
tuscan88
tuscan88

Reputation: 5829

internet explorer not anti aliasing rotated image

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>

Upvotes: 6

Views: 2461

Answers (3)

Reggie Pinkham
Reggie Pinkham

Reputation: 12728

@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;

Upvotes: 2

Fractaliste
Fractaliste

Reputation: 5957

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.

Upvotes: 3

tuscan88
tuscan88

Reputation: 5829

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

Upvotes: 1

Related Questions