JQuery Animate Jumpy solo en Safari

Question

Estoy trabajando en una página donde me gustaría tener una barra de navegación izquierda oculta. Me estoy enfrentando al problema solo con Safari, no hay problemas en Chrome, FF, Opera, IE7 +.

Cuando la animación deslizante esté a punto de completarse en Safari, verá algo de contenido saltar brevemente a su posición original y desaparecer. He estado investigando por un tiempo sin mucha suerte. Parece que la mayoría de las veces es relleno o margen, pero están configurados en cero y he probado dos restablecimientos de CSS. Me parece que tiene algo que ver con las carrozas. Intenté jugar con Clear pero no tuve suerte.

Here is a demo

Y la animación correspondiente:

$('#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

El problema se produce debido a la float: left; en #divLeft Pero se puede quitar el flotador #divLeft y mantener su misma estructura.

También agregue margin-left: 4px; a #content porque los dos divs se aplastan un poco cuando quita el flotador.

Parece que es más un error en Safari y no es su culpa.