Da diverso tempo avevo notato che la funzione anti-aliasing di Internet Explorer 7 aveva un malfunzionamento nel rendering dei testi, quando questi venivano "nascosti" usando metodi jQuery come hide o fadeOut, poi visualizzati con chiamate a show o fadeIn. Beh, fino ad oggi non mi ero interessato poi così tanto alla cosa, stanco dell'ennesimo pelo nell'uovo diverso tra i vari IE, Firefox, Chrome e chi più ne ha più ne metta. Ma stasera ho deciso di voler approfondire il discorso. Ho trovato un grandioso articolo di Benjamin Michael Novakovic (http://blog.bmn.name/2008/03/jquery-fadeinfadeout-ie-cleartype-glitch/), che a quanto pare sembra essere l'unico depositario della soluzione al problema.
Ebbene, il Novakovic sostiene che causa di tutto sia l'attributo di stile filter, il quale, dichiarato o no nei propri fogli di stile, causa questo malfunzionamento del motore di anti-aliasing di IE7 sui testi processati tramite jQuery. Quindi la soluzione consiste nel trasformare eventuali chiamate a show o fadeIn, che originariamente appararianno come
$('#sample1').show('slow');
$('#sample1').fadeIn('slow');
in
$('#sample1').show('slow', function() {
this.style.removeAttribute('filter');
});
$('#sample1').fadeIn('slow', function() {
this.style.removeAttribute('filter');
});
Ho fatto diversi test (tra l'altro sputtanando per l'eternità il mio IE8 nel tentativo di installare una versione standalone di IE7...):
Effettivamente il codice del Novakovic sembra risolvere il problema. Sembra che con IE8 il problema non sussista, mentre con IE7 la differenza è palese.
UPDATE 13/09/2009
Dopo aver effettuato ulteriori test ho notato che applicando la soluzione di Novakovic, FireFox, ma soprattutto FireBug, si incazza di brutto, segnalando un errore Javascript e smettendo di rivolgerti la parola per l'intera giornata. Giustamente FireBug segnala la mancata definizione del metodo removeAttribute. Per questo motivo il codice corretto deve prevedere un controllo preliminare sul tipo di browser che sta eseguendo il codice. Il codice corretto diventerebbe quindi:
$('#sample1').show('slow', function() {
if (jQuery.browser.msie)
this.style.removeAttribute('filter');
});
$('#sample1').fadeIn('slow', function() {
if (jQuery.browser.msie)
this.style.removeAttribute('filter');
});
Un "tester" interessante, che tra l'altro propone una versione più completa della soluzione, l'ho trovato qui: jQuery IE Fade Test
