IE8 Transparency Issues

[kpiatak]

I am currently working on an site, that uses jQuery to fade in and fade out images when certain actions are made.

However in ie8, when the images fade in, they appear black at first.

What is cause this issue? and how can i fix it?

[Paulie_D]

Do you have a link?

[Watson90]

I think it will depend on how the opacity is being coded and added, I believe IE8 doesn’t support the rgba property, so something like this;

background: rgba(0,0,0,0.5);

Will not be supported, however when you code it like this;

background: black;
opacity: 0.5;

It will work, but it adds an overlay to the whole element, so if you had text on the image also, it would make that darker too.

[neerukool]

hi @kpiatak,

This happens when you try to fadeIn or fadeOut a PNG image..
IE 7/8 is very bad in handling PNG transparency. (IE 6 ‘was’ the worst!)

Either use GIF images or you can try: iepngfix.htc found at:
http://www.twinhelix.com/css/iepngfix/

Let us know if that helps.

thanks.

[kpiatak]

@Paulie_D

Here is a link:

http://webapps.easy2.com/ce/ext1108/iris_alarm.html

The problem happens in IE8 on Windows 7.

[Chris Coyier]

I checked the link out in BrowserStack (Windows 7, IE 8) and I didn’t see it going black. Weird. If it’s a huge problem, maybe you could make the images both big JPG’s (instead of PNGs as smaller parts) and transition the entire image.

[Senff]

I’ve often had problems where transparency in IE7/8 caused problems if the wrapping div of the elements in question did not have a background color.

Example: text that fades, or had a specific opacity value wouldn’t look smooth, unless I would give the element that contained the text an actual background color.

Worth a try, although I realize that might be difficult with your design.

[Author]

Posts