1

My situation is perhaps one of the most masochistic in which I've ever been.

I have a series of images that fade in and fade out over a period of time using jQuery. They're all transparent PNGs. Because I'm interested in optimizing the speed of my website, I thought it would be convenient if I could throw all of my PNGs in one nice sprite-able PNG file, still retaining the good benefits of transparency along the way.

Of course, IE is the browser that presents a problem: IE8 seems to struggle with rendering PNGs that fade in and out without the use of AlphaImageLoader. The problem with AlphaImageLoader, however, is that it ignores CSS properties like background-position, rendering CSS sprites impossible to render.

Any ideas of fantastical brilliance out there?

(I've considered using the 'clip' CSS property, but no sprite generator out there today currently outputs data using 'clip', and coding it in manually would be a real PITA.)

Dany Joumaa
  • 2,030
  • 6
  • 30
  • 45
  • what i usually do to have fades is to have a div with the same color as the background fadein on top of the image. then u want have any problem with ie – Ibu Jun 07 '11 at 05:02
  • That's not an option unfortunately, as I have a complex background behind the PNGs. – Dany Joumaa Jun 07 '11 at 13:30
  • Until all the major browsers fix these nagging issues, I've given up on PNGs and converted everything back to JPG and GIF. – Sparky Jun 07 '11 at 16:17

1 Answers1

0

There are scripts around that help you fix IE pngs issues. Here is one that i used in the past.

IE PNG FIX

Ibu
  • 42,752
  • 13
  • 76
  • 103