I am loading data from external html files within my domain into a div on my webpage using a load content method in jQuery. I take the div out of the new page whilst hiding the div in the current page by fading this out and fading the new one in. There is a png image in both of these divs and it is creating horrid black blobs in IE, works fine in other browsers but due to IEs inability to process multiple filters its making a mess.
I tried using the unit png fix to no avail, does anyone have any fixes or ideas to help keep my pngs looking nice during this transition?
i46.tinypic.com/t9dtvr.jpg this is a screenshot of the problem, cheers
also discovered that the png that is on the page originaly (before loading anything new) fades in and out perfectly using the unit png fix but stuff loading in and then back out from external files doesnt. Ive added the fix to those pages too but that doesnt work either.
There isn’t any 100% solution to the problem. If you have semi transparent areas of a PNG, any filters applied will render those areas fully opaque. Most fading transitions I’ve seen apply the filter during the fade, then remove the filter afterwards. This means you will see the aliased areas while the image fades in but it will look fine at the end of the transition.
Another solution can be used for parts of a page that are static: If the background behind the image is static you can create an image from that background and use it as the background image of your img tag. Then, fading in and out will work just fine. If the png image is already the background image of an element, you will need to put it in a container with the opaque background image set and fade that instead.
If you’re fading in front of text or dynamic content, there’s not much you can do.
EDIT: The following page seems to have a solution involving the old AlphaImageLoader filter and a parent div with the opacity filter set:
http://blog.mediaandme.be/?ref=17