WebKit jQuery animation bug

Question

I have two sites I'm working on where I use jQuery to animate some objects via CSS properties. Everything works fantastic in Firefox but there ware some webkit bugs where my objects disappear and reappear off screen before the animation starts.

http://coreytegeler.com/gl/ (click the text box)

$('#front-nav-wrapper').css({'position' : 'fixed','top': '55px', 'opacity' : '1' }); 

http://coreytegeler.com/justin/ (click any of the boxes)

$("#nav ul li").click(function() {
    $("#nav ul li#a").animate({'margin-top' : '-300px' , 'margin-left' : '0px', 'left' : '10px'}, 500, 'swing');
    $("#nav ul li#b").animate({'margin-top' : '-200px' , 'margin-left' : '0px', 'left' : '10px'} , 500, 'swing');
    $("#nav ul li#c").animate({'margin-top' : '-100px' , 'margin-left' : '0px', 'left' : '10px'} , 500, 'swing');
    $("#nav ul li#d").animate({'left' : '10px'} , 500, 'swing');
    $("#nav").animate({'margin-top' : '100px'} , 500, 'swing');
});

I'm sure this has to be a known error with an easy fix but I can't seem to find a fix yet :(

Answer 1

From what I can make out, the problem seems to be that webkit can't animate the left property from what is initially an 'auto' value to a pixel offset. What it does is set the property to 0 and then animate from there.

The one solution I can suggest, is to calculate the current pixel offset of each li element immediately before starting the animation, and set their left properties to those offsets.

Something like this:

$("#nav ul li").each(function(){
    $(this).css('left', $(this).position().left + 'px');
});

jsFiddle example

This is based on your second example link.