Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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().animate({'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);
    });
});
like image 951
alt Avatar asked Jun 18 '11 11:06

alt


1 Answers

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 )

like image 179
stimpy Avatar answered Oct 16 '22 08:10

stimpy