All Javascript on site performs horribly Slow in Firefox 4 when transparent PNG's are present on the page

ETA UPDATE: I've found that if I remove all the transparent .png files from my site, there are about 5, it runs fine. THAT is odd. And up-votes would be very helpful, I tested it on a few more computers, and 4/15 have this issue. Thanks! Any ideas?

Runs fine on PC Firefox and all other browsers, but on 4/15 computers in Mac Firefox, the Javascript is just terribly slow, specifically the menubar. I tested them both outside the site and they worked fine. This has been an ongoing problem for quite some time, no idea how to solve it. Updated, problem goes away if I remove transparent PNG's from the site, like the banner in the top left.

My site: http://thenozzle.net/

All of the javascript is a bit slower then in other browsers, the two largest ones are menubar and video player. I can't ignore it at this point.

I'm wondering if it's something wordpress is adding, because the js works fine elsewhere.

Any ideas?

ETA: Here's my JS file:

http://thenozzle.net/wp-content/themes/twentyten/scripts.js

ETA: Here's my menubar code

$(function() {
    $('#sdt_menu > li').bind('mouseenter',function(){
        var $elem = $(this);
        $elem.find('img')
             .stop(true)
             .animate({
                'width':'170px',
                'height':'170px',
                'left':'0px'
             },400,'easeOutBack')
             .andSelf()
             .find('.sdt_wrap')
             .stop(true)
             .animate({'top':'140px'},500,'easeOutBack')
             .andSelf()
             .find('.sdt_active')
             .stop(true)
             .animate({'height':'170px'},300,function(){
            var $sub_menu = $elem.find('.sdt_box');
            if($sub_menu.length){
                var left = '170px';
                if($elem.parent().children().length == $elem.index()+1)
                    left = '-170px';
                $sub_menu.show().anim开发者_StackOverflow中文版ate({'left':left},200);
            }
        });
    }).bind('mouseleave',function(){
        var $elem = $(this);
        var $sub_menu = $elem.find('.sdt_box');
        if($sub_menu.length)
            $sub_menu.hide().css('left','0px');

        $elem.find('.sdt_active')
             .stop(true)
             .animate({'height':'0px'},300)
             .andSelf().find('img')
             .stop(true)
             .animate({
                'width':'0px',
                'height':'0px',
                'left':'85px'},400)
             .andSelf()
             .find('.sdt_wrap')
             .stop(true)
             .animate({'top':'25px'},500);
    });
});

I suggest you may have a some slighty corrupted PNGs.

Suggest you try the following: resave the PNGs out of photoshop. Save both PNG-24 and PNG-8. Test .

I have seen this before with PNGs that did not quite save correctly.

I tested the site on two macbooks pros one a core duo 2 and the other a core duo. Both ran fine the menu was very responsive even while the video was playing.

Assuming you have one the other steps listed in other answers here on the "suspect macs) ( ie created new accounts and tested ) then i think you need to look at what else makes those Macs different ? What version of OS X ? What model ( ie macbook vs Macbook pro vs Air etc )

Firefox 4.0 on Mac should be using OpenGL for hardware acceleration, while FF on Windows uses Direct2D. Since the problem is only occuring on some Macs, could it have something to do with their graphic card chipset - perhaps compare the specifications of the offending Macs, and also try to disable hardware acceleration to see if problems go away?

Try creating a new Firefox profile so you can run it with no extensions, addons, etc. installed. It may be that some extension (AdBlock, GreaseMonkey, etc.) is conflicting with some of the scripts in your page somehow.

I just tested it in FF4 on my Mac (MacBook Pro, 10.6.7) and it loaded up quickly, so it may just be something in your setup.

I would first validate the HTML, as it's possible that HTML tags could be going unclosed, producing weird behaviour with javascript. Validate your HTML and use Firebug to help you.

After that, I would try using a different spacer such as this one.

I don't know if firefox has the same problem, but I know that if you tile small transparent png (like 1x1), it cause memory leak in ie7. Using a larger image fix it.