How to fix IE ClearType + jQuery opacity problem in this script?

Question

Hello, I'm having a rather common problem (or so it seems, after some googling around...) with IE messing both bold text AND transparent pngs while animating opacity using jQuery.

You can view the sample here: http://dev.gentlecode.net/dotme/index-sample.html (only occurs in IE, obviously)

I've seen some blog posts saying the fix is to remove the filter attribute but I'm not sure how to apply it to the script I'm using since I got it from a tutorial and am still learning jQuery...

The script goes as follows:

$('ul.nav').each(function() {
    var $links = $(this).find('a'),
        panelIds = $links.map(function() { return this.hash; }).get().join(","),
        $panels = $(panelIds),
        $panelWrapper = $panels.filter(':first').parent(),
        delay = 500;

    $panels.hide();

    $links.click(function() {
        var $link = $(this),
            link = (this);

        if ($link.is('.current')) {
            return;
        }

        $links.removeClass('current');
        $link.addClass('current');

        $panels.animate({ opacity : 0 }, delay);
        $panelWrapper.animate({
            height: 0
        }, delay, function() {
            var height = $panels.hide().filter(link.hash).show().css('opacity', 1).outerHeight();

            $panelWrapper.animate({
                height: height
            }, delay);
        }); 

        return false;
    });

    var showtab = window.location.hash ? '[hash=' + window.location.hash + ']' : ':first';

    $links.filter(showtab).click();

});

I would appreciate if someone could go over it and show me how to fix the opacity issue. Will the filter method also fix the trouble I'm having with transparent pngs having pixelated ugly borders like the bold type as well?

Thanks in advance for all help!

Answer 1

I've run the sample page on (Vista) IE8, IE8 compatability, Google Chrome 4.1 and Firefox 3.5.9 - if you like I can also do XP and Win 7 - but so far they all appear to work in a similar fashion.

The problem could be with IE6 (I guess) because there are known problems with IE6 and transparent pngs in IE6, google with:

ie6 transparent png fix

for a bunch of fixes including (which is the second in the above search in Google and the first one in the search says it is a better solution than his):

http://24ways.org/2007/supersleight-transparent-png-in-ie6

As to the jquery sample you've posted, if it still fails with IE6/png workarounds then post the html you are using with the jquery so it can be debugged.

Answer 2

You can put it in like this:

Change this line/statement:

var height = $panels.hide().filter(link.hash).show().css('opacity', 1).outerHeight();

To this:

var filtered = $panels.hide().filter(link.hash).show().css('opacity', 1);
if ($.browser.msie)
  filtered.each(function() { this.style.removeAttribute('filter'); });
var height = filtered.outerHeight();

Normally I don't condone $.browser use, but in this case it is an IE bug and jQuery is applying filter because it's IE as well. This will loop through the elements and remove the filtered set and take off the filter style attribute if you're in IE.