Background image .png that it isn't display correctly with IE8 on the Windows XP

Question

I used a background with a image of a 'cloud of ice', that I do disappearing and then reappearing with jQuery and using the .fadeTo() function. As the background image is a .png, if you use the IE8 on the SO Windows xp I see the background image as if it is bordered with black/grey color and the transparent isn't perfect, while if you are using the other browsers the 'cloud of ice' is normal. I would know if there is some plug-in jQuery or css filter that can resolve this transparent incompatibility that there is on IE8.

html:

<div class="ice"></div>

css:

#main #slogan #iphone .ice {
    position:absolute;
    top:20px;
    right:22px;
    display:block;
    width:450px;
    height:486px;
    background:transparent url(../images/system/main-animation-ice.png) no-repeat 0 0;
    z-index:1;
}

javascript:

$(o).delay(i*'1200').fadeTo(2000,1.0).fadeTo(2000,0.2);

On the left there is the normal effect, and on the right there is the IE8 bug.

Answer 1

You can do it in CSS by using IE's proprietary filtering system.

 #main #slogan #iphone .ice {
     position:absolute;
     top:20px;
     right:22px;
     display:block;
     width:450px;
     height:486px;
     background:url(../images/blank.gif), transparent url(../images/system/main-animation-ice.png) no-repeat 0 0;
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src='../images/system/main-animation-ice.png');
     z-index:1;
 }

you will need to use a blank.gif for the 'first' image in your background declaration. This is simply to confuse ie8 and prevent it from using both the filter and the background you have set, and only use the filter. Other browsers support multiple background images and will understand the background declaration and not understand the filter, hence using the background only.

You may also need to play with the sizingMethod in the filter to get it to work the way you want.

UPDATE

I checked out your site in ie8 and you have more of a problem here than you mentioned in this post.

First you did not include an override of background : none so ie8 is giving you BOTH a filter version and a broken background version right now.

Second you are not just using it as a background image, its a sprite. You cannot use a sprite with an alpha image loader; because there is not background position property. So you will need to break it into 3 images and switch between them in the filter rather than switching using background position.

Third animation performance is terrible. You are asking ie8 to alter the opacity of 6 transparent images on top of each other at the same time. Even with the alphaImageLoader, this is going to crash someone's browser.

My advice. For ie8 $('.ice').hide();

However this method for fixing png's in ie8 DOES work http://jsfiddle.net/ZSYbU/2/

Answer 2

I do not believe there are ways to avoid this Opacity animation issue in IE 8. I have encountered it as well and have never found a solution. If there is one, I'd love to learn it.