Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JQuery Animation stutter in Firefox

I am currently making my first website and I'm using JQuery for the animations. The animation is very smooth in IE but in Firefox, it stutters severely. The website is www.chiahaoyang.com. I've spent countless hours trying to fix it to no availability. Thanks!

UPDATE1: The JQuery loading/animation code is:

    function ajaxLoad(input){
        contentBox.fadeIn();
        content.fadeOut("medium",function() {
            content.load("ajax_pages/"+input+".html", function(){
                var contentHeight = content.height();
                if(contentHeight > screen.height*0.66){
                    contentBox.animate({height: screen.height*0.66},"slow",function(){
                        content.delay(500).fadeIn("slow");
                    });
                } else {
                    contentBox.animate({height: contentHeight},"slow",function(){
                        content.delay(500).fadeIn("slow");
                    });             
                }
            });
        });
    };

content is the div that I load ajax pages to. contentBox is the div enclosing content

UPDATE 2: The source of the choppiness is some css3 properties:

-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.15);  
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.15);

It makes sense that these enhancements put more load on the browser, but are there any ways to get around it to make Firefox render it just as smoothly as IE?

UPDATE 3: Okay I just replaced the above code with:

-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1), inset 0 0 5px rgba(0, 0, 0, 0.15); 
-moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1), inset 0 0 5px rgba(0, 0, 0, 0.15); 
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1), inset 0 0 5px rgba(0, 0, 0, 0.15); 

Now it's a lot smoother...

like image 294
Danny Yang Avatar asked Dec 03 '25 06:12

Danny Yang


1 Answers

this issue is very annoying for me, I'm designing my site as well and I have to lower the box-shadow effects for firefox to run it decently, not to mention jquery elements... those can't even run if there are too much box-shadow effects. I dont get why this isn't happening if I use IE, my site run smooth as water on it. obviously there is something going on here, please someone give us some help :) thanks.

like image 189
Pablo Avatar answered Dec 05 '25 20:12

Pablo