[TheEmpty]

You're doing too much processing? What is your processor? What else is going on in the JS?

[iRook]

My processor is an AMD quad core. The JS is only doing the animation, the only other thing it does is set a window.location at the very end. And the animations only get choppy randomly, and as far as I can tell, only in chrome. (Speaking of stuff only in chrome, why does FF have such nice anti-aliased text?!)

[alexdavey]

iRook, on 19 May 2012 - 10:43 AM, said:

My processor is an AMD quad core. The JS is only doing the animation, the only other thing it does is set a window.location at the very end. And the animations only get choppy randomly, and as far as I can tell, only in chrome. (Speaking of stuff only in chrome, why does FF have such nice anti-aliased text?!)

How many elements are you animating? If you post your code we should be able to help

If you are talking about text in canvas, Chrome doesn't support sub-pixel text rendering . It isn't clear in the specification, so some browsers do not support it, some browsers have it always on.

[iRook]

See, I feel like the code wouldn't matter, because it happens on every single project I've done. But here it is.

$(document).ready(function(){
    var dl = 0;
   $("#container").delay(200).animate({top: "50px"}, 200)
				  .animate({top: "44px"}, 200)
				  .animate({top: "50px"}, 150)
				  .animate({top: "47px"}, 130)
				  .animate({top: "50px"},120)
	
   $("#logo").delay(1000).animate({width:"276px"}, 3000)
	
	$("#download_text").hover(
	function() {
	if(dl==0) {
		$("#download").stop().animate({bottom: "50px"});
		$(this).stop().fadeTo(200, 0);
		}
		
	}, 
	function() {
	
	$(this).stop().fadeTo(200, 1);
	});
	
	

	if(dl==0){
	$("#download").click(function() {
		window.location = "launcher_v1.zip";
			dl = 1;
		$("#download_text").html("Should have started!");
		$("#download").stop().animate({bottom: "-200px"});
	
		
		
		
		
	});
	}
	
                       

	
	$("li").hover(
	function() {
		$(this).stop().animate({left: "10px"});
	
	}, 
	function() {
	$(this).stop().animate({left: "0px"});
	});

});

Don't worry about my crappy ah..logic with the dl==0.
Edit: Just want to stress, this happens rarely.

[Nand]

Without going through the code...
If you are using Chrome, there's a flag that allows hardware based acceleration for canvas objects.

chrome://flags/

It's called: GPU-Accelerated SVG and CSS Filters