PNG Transparency Lost When Changing Div’s Opacity

@andygrantOct 28.2008

I have a div that I fade in and out using javacript and the opacity style setting. On the div i have a dropshadow using a PNG as a background and the png transpacency works fine normally.

However when I use Javascript to fade the div to disappear, the next time I fade the div to reappear the transparency in the PNG is lost and it goes solid black.

Does anyone know what could be causing this? Its fine in Firefox but IE7 gets the problem.

Thanks

to post a comment

JavaScript

@toicontienOct 28.2008 — #Is the PNG an IMG tag or a background image?

@andygrantauthorOct 28.2008 — #It is a background image, see css below.

background: url(../images/shadow.png) bottom right no-repeat;

@toicontienOct 28.2008 — #Ah. Hm. Make sure the hasLayout DOM property is set to true. If that doesn't work, then you just might be SOL with Internet Explorer. I ran into a similar issue with IE6 and the only workaround I was able to do was use a transparent PNG only, and not change the opacity. The problem I was solving had nothing to do with fading in or out, but had to do with a tag permanently changed to a different opacity. You might need to make sure the opacity on that element is 100% opaque after the fade in routine completes. Many JavaScript libraries end a fade-in with 99.99% opacity. You might need to explicitly set the opacity to 100%.

@thirdenderDec 11.2008 — #IE loses the alpha values of transparent pixels between filters, even IE's built in filters. Applying “filter: progid: DXImageTransform.Microsoft.Blur(pixelradius=2), Alpha(opacity=40);” to an element results in a two pixel black border around the element where the transparent pixels should appear. Instead of applying the "filter: Alpha(opacity=...)" directly to the PNG, try applying it to a surrounding element.

Oh, and two more quirks I found while playing with this. This won't work (even in IE7) with PNGs loaded through the <img /> tag. You have to load the PNG using the AlphaImageLoader filter (like the IE6 PNG fix). Also, the surrounding element needs to have "zoom: 1" set in the CSS.

Example:

[code=html]
 <style type="text/css">
 #image {
 width: 304px;
 height: 100px;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="text.png", sizingMethod="scale");
 }
 #opacity {
 filter: Alpha(opacity=40);
 zoom: 1;
 }
 </style>
 
 <div id="opacity">
 <div id="image"></div>
 </div>
 [/code]

@toicontienDec 11.2008 — #Yeah, seems IE needs hasLayout before it can apply filters. Thanks for the heads up. ?

PNG Transparency Lost When Changing Div’s Opacity

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

PNG Transparency Lost When Changing Div’s Opacity

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴