JQuery Animate Jumpy Only in Safari

Question

I'm working on a page where I'd like to have a hiding left navigation bar. I'm running into the problem only with Safari, there are no issues in Chrome, FF, Opera, IE7+.

When the sliding animation is about to complete in Safari you'll see some content briefly jump to its original position then disappear. I have been researching for a while without much luck. It seems like most of the time it's padding or margin, but they are set to zero and I've tried two CSS resets. It seems to me like it's something to do with the floats. I tried playing with Clear but no luck.

Here is a demo

And the relevant animation:

$('#btnHide').click(function() {
    $("#divNavContent").animate({
        width: 'toggle'
    }, 1000, function() {
        $("#divNavHidden").animate({
            width: 'toggle'
        }, 500);
    });

});

$('#btnShowMenu').click(function() {
    $("#divNavHidden").animate({
        width: 'toggle'
    }, 500, function() {
        $("#divNavContent").animate({
            width: 'toggle'
        }, 1000);
    });
});  

Answer 1

The problem occurs because of the float: left; on #divLeft But you can remove the float from #divLeft and maintain your same structure.

Also add margin-left: 4px; to #content because the two divs get a bit squished when you remove the float.

Seems like its more of a bug in Safari and not your fault.