Internet Explorer e animazioni jQuery

Premetto che il seguente post è frutto delle mie osservazioni sulle versioni 8, 7 e 6 di Internet Explorer e non sulla 9. In generale, le animazioni jQuery in queste versioni di IE presentano delle peculiarità  che è bene affrontare in modo organico. Essendo frutto delle mie osservazioni in progetti live non derivati da test case specifici, quello che segue non è assolutamente da considerarsi definitivo.

Parole chiave

jQuery permette al metodo animate() di usare parole chiave come show, hide, toggle eccetera con alcune proprietà  CSS. IE non supporta alcune di queste combinazioni di proprietà  e parole chiave e restituisce un errore. Per esempio, display: 'show' non è supportato e in alcuni casi anche visibility: 'show'. Questo aspetto è particolarmente evidente in IE8 e 6.

Tempistica delle animazioni

Le animazioni jQuery sono basate su un rapporto asincrono tra il numero di step di cui è composta l'animazione e la durata della stessa. Un semplice test:

$('#test').animate({
    width: 200
}, {
    duration: 1000,
    step: function() {
       console.log($(this).css('width'));
    }
});

Aprendo la console JavaScript noterete un aumento del valore della larghezza che non avviene con una progressione sequenziale costante. Quindi potrete avere 100, 100, 100, 103, 104, e così via (se 100 pixel è la larghezza di partenza dell'elemento).

I browser mostrano una fluidità  dell'animazione quando riescono a seguire tale successione di step e ad aggiornare il valore CSS al momento giusto. IE ha problemi con le animazioni complesse proprio per questo motivo: è come un batterista che perde il tempo durante l'esecuzione e poi cerca di recuperare. Ecco perchè in plugin complessi le animazioni in IE si vedono a scatti: semplicemente, IE perde il tempo dell'animazione (specie quando duration ha un valore superiore a 1000) e cerca di concludere la sequenza di step alla bene e meglio.

Opacità  delle immagini PNG

Si supponga di avere un'immagine PNG nascosta e di usare un semplice fadeIn():

$('#png').fadeIn(1000);

IE8 e 7, che pure supportano la trasparenza alfa PNG, mostreranno un riquadro nero intorno all'immagine che scomparirà  solo quando l'animazione è completa. Come abbiamo detto in precedenza, IE ha difficoltà  a seguire gli step di un'animazione. In questo caso gli step riguardano la proprietà  opacity.

Per questo problema esistono diverse soluzioni, illustrate in questo thread su StackOverflow.