I thought I'd document a problem I came across when using transparent PNGs. Now as many of you know, the use of PNGs on the web have become more and more popular and is slowly replacing GIFs as the preferred image format of choice especially with its high quality and use of transparencies.

Rendering of transparencies in PNGs is much smoother compared to traditional transparent GIFs. The result is a much more versatile and sophisticated looking graphic.

I myself have been slowly integrating PNGs into my projects and rarely use GIFs anymore unless it's absolutely necessary. Combine the effects capabilities of JQuery with transparent PNGs and you got yourself one slick looking interface.

Alas! I should've known it was too good to be true.

THE DILEMMA:

In some of my projects, including this website, I decided to utilize JQuery to spice up my interface. I had this idea of animating a button as I hover over it. Part of that animation is dynamic fading that was suppose to make the effect more compelling. The best tool for the job is JQuery's animate method.

First, I created 3 button images with class="button". Then I used the syntax below:

1 $(".button").hover( function ()
2 {
3 $(".button").animate({opacity:"0.3"},500);
4 $(this).animate({opacity:"1",marginLeft:"10px"},500);
5 },
6 function ()
7 {
8 $(".button").animate({opacity:"1",marginLeft:"0"},500);}
9 );

Now let me walk you through this code:

Line 1 is your way of telling JQuery to trigger something if a user hovers on a particular button with class name = button.

Line 3: To make the active button more prominent, I figured why not bring the rest of the buttons into the background by making it slightly transparent. Note that this will "fade" all the buttons. Also, in case you're wondering, the number to the right (500) simply specifies the speed of the animation. The lower the number, the slower the animation.

Line 4: I then instruct JQuery to make the current button in focus completely opaque and move it slightly to the left; thus, making it stand out more.

Line 6 - 9: This is the hover method's second argument which gets triggered when I mouse out. In this case, it simply tells JQuery to reset the buttons to its original state.

Perfect! I said....well almost perfect....

THE TROUBLE WITH IE

Well, it's no surprise that IE has very poor support for transparent PNGs. It wasn't until IE7 that transparent PNGs were supported but even then, rendering is sketchy.

First off, I found that 24-bit transparent PNGs does not work in IE6. Instead of a transparent background, you see an opaque white background which looks horrible. Because of that, I've had to render all my PNGs to 8-bit which is not bad except it loses a lot of its sharpness and resolution. Even with 8-bit PNG rendering, IE6 does not support Alpha transparencies well and behaves just like a regular transparent GIF which means you might see a lot of jagged edges instead of smooth contours and drop shadows.

Fine, I said, I can live with that.

Along comes the next problem:

Take for example the code above. That code works perfectly across all modern browsers (FF1 +, IE7, Safari 1+) prior to hovering over the button. As soon as you hover over the buttons however, IE7 messes up the transparency. Instead of a transparent background and smooth contours, it starts rendering the image with a black opaque background with jagged edges. Later on, I found out that this has something to do with IE7's poor support for the opacity attribute.

Sigh!

That basically limits the effects I can use SO to make the images look as consistent across all browsers, I've had to sadly do away with the opacity manipulation. Sure it's not as slick looking but at least it renders the images more consistently and doesn't hinder usability.

Rumor has it that full PNG support on IE will not be realized until IE8. Let's hope that really happens. Until then, we'll just have to live with IE's limitations.