PNGs, graphic filters, and yet more IE problems

written by Craig, 10 August 2008

I really thought I understood IE’s PNG problems and knew how to get around them. But then, two more crop up within a week…

Failing filters in IE6

I recently developed a fairly complex template for a client which required 24-bit PNGs and transparency effects. It had to work in IE6, IE7, and all the decent browsers. IE6 PNG support is well understood, so it’s not normally a problem to implement workarounds. Personally, I use JavaScript to apply IE6 filters when a 24-bit PNG is required.

The template was completed, tested in every major browser, and submitted to the client … where it consistently failed in IE6. None of the 24-bit PNGs or transparency filters worked in any of their installations, whereas mine was fine.

The culprit turned out to be … Internet Explorer 7. Bizarrely, installing IE7 then running a standalone version of IE6, or simply uninstalling IE7 will replace IE6’s filter library and cause it to fail. Thanks Microsoft.

I didn’t notice the problem because I use IE6 as my main IE test browser (it causes the most problems). I run IE7 in a virtual machine so there’s no possibility of a conflict. However, the developers at my client’s office either used standalone versions of IE6 or the excellent IETester.

Fortunately, the problem can be fixed by copying ‘old’ working versions of dxtrans.dll and dxtmsft.dll to your IE6 installation folder. The files can be found in Evolt.org’s browser archive or you can download the IE6 filter fix files separately. I hope that helps someone - it caused me several hours of frustration!

IE7 and applying filters to 24-bit PNGs

Just when I thought it was safe to use PNGs in IE again, another problem crops up in IE7. Web developers begged Microsoft for PNG support and they finally implemented it in IE7. Sort of.

IE7 has absolutely no problem if you put a 24-bit alpha-transparent PNG on a page using an <img> tag or a CSS background. However, issues arise as soon as you try doing anything fancy - like making that image fade-in using the IE opacity filter.

From what I can see, IE7 sees the transparent pixels in the PNG, it knows that you want to make them even more transparent, has a mental fit, and makes them all solid black. Weird.

If this occurred in IE6, it would be fairly easy to fix by substituting the PNG for an 8-bit version, e.g. the following CSS exploits an IE6 bug: #mypng { background-image: url(”my24bit.png”) !important; /* IE7 and most other browsers */ background-image: url(”my8bit.png”); /* IE6 and below */ }

Yes it’s a bit of a hack, but it’s minor, easy to debug, and is still valid CSS. However, IE7 is much harder to identify. I’m not sure the problem can be solved without resorting to conditional comments or browser sniffing - both of which should be avoided if possible.

So if you’re planning on using alpha-transparent PNGs, don’t bother applying IE filters! Unless someone knows of a solution?…

• categories: web browsers, web development
• tags: graphics, ie, png
• trackback: http://www.optimalworks.net/blog/2008/web-development/ie-png-filter-problems/trackback
• bookmark: del.icio.us, digg, facebook, reddit, Furl, Spurl, Blinklist, Slashdot, Technorati, Yahoo!

4 comments:

1. 20 November 2008 newtonpage commented

   I have EXACTLY the same issue with custom-made tool tips using 24-bit png’s and an animation to fae-in fade-out (via javascript) - - works in all FF, Safari and Opera in XP, Vista and Mac BUT in IE 7 (not bothering with earlier than IE 7) - - the transparent elements of the png are SOLID BLACK. I am to the point using the governing php script to sniff the browser (ugh! - - I have been able to avoid this to this point) and disable tool tips for IE - - any and all ideas are welcome.

2. 11 December 2008 thirdender commented

   After playing with various filter combinations for close to an hour, I found a ghetto solution. Wrap the alpha transparent PNG in a separate DIV and apply the filters to the DIV. Here’s the kicker though: the outer DIV needs to have “zoom: 1″ set in the CSS, and you need to load the PNG using AlphaImageLoader in IE7 (yes, you have to use the IE6 PNG fix for this to work in IE7).

   It seems like IE is unable to pass the alpha values from one filter to the next. 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.

   Example:

   #image {
   width: 304px;
   height: 100px;
   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”text.2.png”, sizingMethod=”scale”);
   }
   #opacity {
   filter: Alpha(opacity=40);
   zoom: 1;
   }

3. 14 December 2008 Craig commented

   Thanks for sharing that - it sounds like a great solution. I suspect that IE7 is simply using IE6’s filter library to render PNGs, so that’s why it works.

   Your solution also means that you can target IE, rather than IE6 and IE7 separately. Who knows about IE8, though!

   Finally, the zoom in your transparent DIV will set the element to ‘hasLayout’, which is required. Adding a width or a height will have the same effect and make the code CSS-valid.

4. 2 January 2009 Bean commented

   Ho, Ender!

   Ender is (as always) correct. That solution just solved a problem i was having using jQuery to fade in some A tags with transparent 24bit PNGs.

   Oh and by all accounts, IE8 has actually regressed in PNG support, at least, the version of IE8 that BrowserShots is using doesn’t like any of my PNGs.