JQuery Animate Jumpy Solo in Safari

Question

Sto lavorando a una pagina in cui mi piacerebbe avere una barra di navigazione a sinistra nascosta. Sto incontrando il problema solo con Safari, non ci sono problemi in Chrome, FF, Opera, IE7 +.

Quando l'animazione scorrevole sta per essere completata in Safari, alcuni contenuti salteranno brevemente alla posizione originale e quindi scompariranno. Ho fatto ricerche per un po 'senza molta fortuna. Sembra che la maggior parte delle volte si tratti di padding o margine, ma sono impostati su zero e ho provato due reimpostazioni CSS. Mi sembra che abbia qualcosa a che fare con i galleggianti. Ho provato a giocare con Clear ma senza fortuna.

Here is a demo

e la relativa animazione:

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

Il problema si verifica a causa del float: left; su #divLeft Ma è possibile rimuovere il galleggiante da #divLeft e mantenere la stessa struttura.

Aggiungere anche margin-left: 4px; a #content perché i due div diventano leggermente schiacciati quando si rimuove il galleggiante.

Sembra più un bug in Safari e non è colpa tua.