PNG transparency plus opacity – Internet Explorer 8 bug

This bug seems to be bugging us from IE7 and i still can’t believe that after 8 years of work, Microsoft can’t make the alpha transparency work.

Just installed the new Internet Explorer 8 as an update. The first thing i tried to do was, of course, to check how my portfolio is looking. Immediately noticed that something is not right and as i researched i found that: if you use PNG transparent image, in combination with opacity filter in IE8 the png image looses its transparency.

Checkout the demo page.

It’s even more interesting that even opacity 100(which is no opacity at all) triggers the bug.

This is very uncomfortable for JavaScript programming, where you want to use opacity for appearing/disappearing objects.

There is one workaround which is not very comfortable but works! To use the png image   as a background with the AlphaImageLoader filter. Here is the workarownd.

13 Responses to “PNG transparency plus opacity – Internet Explorer 8 bug”

  1. John Peterson Says:
    August 6th, 2009 at 10:23 am

    Thanks

    I came across this problem too

    I hope they’ll fix it

  2. Taylor Says:
    September 1st, 2009 at 9:03 pm

    i am pretty much satisfied about the features and stability of Internet Explorer 8. it is much better than IE6 or IE7.

  3. Acnerdz Says:
    September 11th, 2009 at 8:36 am

    Internet Explorer 8 seems to be the best browser for me. I can open more than 20 windows simultaneously without crashing. IE7 and IE6 is unstable that if you open more than windows at a time it just freezes or causes the blue screen.

  4. Jason Says:
    September 27th, 2009 at 12:03 pm

    Just came across this myself using a transparent png presented via jquery. I can’t believe they still can’t get this right.

  5. Ralph Says:
    September 29th, 2009 at 12:38 pm

    WTF! I can’t believe it. Do we still need a fix for this??? What a dumb ass mot…ers at IE. What the hell are they doing there at this IE-devcentre???? Pffff…

    @Taylor & Acnerdz
    I can’t believe what the two of you are saying as well. You’re supporting the shitiest browser there is with these kind of arguments…. “I can open 20 windows simultaneously without crashing” …bloody hell!!!!

  6. SiNGH Says:
    October 5th, 2009 at 7:25 am

    Well, I currently have 5 windows open, with a total of 238 tabs open.

    I’m using Firefox.

    *_*

  7. transparency Says:
    October 12th, 2009 at 10:22 pm

    [...] …and here for a possible solution This entry was written by admin, posted on October 12, 2009 at 7:02 pm, filed under Uncategorized. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL. « Hello world! [...]

  8. Michael Mercer Says:
    November 2nd, 2009 at 9:45 am

    Dude, thank you so much. After many hours of research trying to find the solution to this bug, I finally came across this article and it worked perfectly.

  9. Glenn Says:
    November 11th, 2009 at 4:44 am

    @Taylor & Acnerdz

    What the hell. Use a browser like Firefox, Opera or Safari. But no, you use that worthless IE browser.

  10. squarecandy Says:
    June 8th, 2010 at 9:42 pm

    Thank YOU!!!
    Essential for using the jquery cycle plugin with PNG transparencies.

  11. Koke Says:
    June 26th, 2010 at 1:51 am

    While IE should be the browser to set the standard, it really causes pain and frustration. I use Chrome and it seems to be the best for me. Unfortunately most of the world still uses IE, and I have to design my websites to work properly on IE. While the fix on this page seems to have fixed the problem in IE, it now doesn’t work on Chrome. all 3 divs are 100% transparent. Oh well, the search goes on…

  12. admin Says:
    June 28th, 2010 at 10:35 pm

    The example above was designed only for IE, to demonstrate the fix. I fixed it now to work in the other browsers as well.

  13. Abudl Akbar Says:
    April 6th, 2012 at 12:36 am

    It work great! BUT the “background” CSS property might be set to none just for IE8(conditional comments). Otherwise two overlapping backgrounds will display. One from background and other from AlphaImageLoader filter.

Leave a Reply