4

I'm getting some weird antialising happening on my transparent PNGs in IE - the situation appears to worsen after certain jquery animations are performed / elements are covered up by other elements, etc. I posted a few screenshots. Anyone know why this might be happening?

You can see that some images, (such as the car in the middle) display just fine. Others (like the two vehicles, which have been faded out with JQuery, display strangely after certain things happen in JQuery. And yet others, such as the three icons in the first screenshot, just always display a little bad (notice the black outlines to the icons). Thanks for any help you can provide. I should note that these are all background images that are part of a sprite.

enter image description here enter image description here

Justin Johnson
  • 30,978
  • 7
  • 65
  • 89
mheavers
  • 29,530
  • 58
  • 194
  • 315
  • 2
    Possibly related: [How to make a Google Maps semi-transparent PNG tile layer work in IE8?](http://stackoverflow.com/questions/2020690/2075524#2075524) – Pekka Sep 09 '11 at 20:03

3 Answers3

3

You can use one of following solution while creating pngs for IE. - http://pornel.net/imagealpha - http://pornel.net/pngquant

Also please consider reading this article for understanding .png IE problems http://html5boilerplate.com/docs/Notes-on-using-png/

I hope this will solve your problem and get you back on track.

Cheers, Imran

Imran
  • 1,094
  • 1
  • 21
  • 41
3

You can use PNG image for modern browsers because these browsers have no BG problem in jquery animation

background:url(../images/banner01.png) no-repeat right 13px;

And add this For IE ( Use another CSS file or use IE hack )

/* ie fix */
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/banner01.png",
 sizingMethod="crop");

about ie css declaration: background-image value should be none, because the filter property will print background images in IE.

Wesley Murch
  • 101,186
  • 37
  • 194
  • 228
Sanooj
  • 2,637
  • 15
  • 20
0

This blog helps me yesterday: http://www.useragentman.com/blog/2010/09/02/how-to-make-cleartype-font-face-fonts-and-css-visual-filters-play-nicely-together/

Erik Márföldi
  • 206
  • 1
  • 2
  • 10