Internet Explorer, font clear type e trasparenze

Un simpatico problema che mi è capitato di recente con Internet Explorer, su un sito avevo la necessità di far apparire e scomparire in sequenza delle news in homepage usando utilizzando le funzioni fadeIn e fadeOut di jQuery. Niente di più semplice se non fosse che testando il sito con vari browser è emerso che con IE7 e IE8 i testi durante il fading venivano tutti sgranati.

Come al solito mi sono affidato a San Google per cercare documentazione in merito a questo problema e ho trovato che IE renderizza male i font clear type quando vengono applicate le trasparenze.

Tra i vari risultati ho trovato molti workaround che cercano di arginare il problema, come ad esempio alla fine della transizione resettare i valori di filter alla fine delle transizioni come si può vedere dal codice qui sotto riportato da stackowerflow:

$('#myDiv').fadeIn('slow', function() {
   this.style.removeAttribute('filter');
});

oppure impostare un background-color o zoom:1 all’elemento che contiene il testo che subirà la transizione.

Queste soluzioni non hanno, almeno per i test che ho fatto, risolto il problema o lo risolvono per una versione di IE e per l’altra no, oppure come il primo esempio correggono il problema solo alla fine della transizione ma non durante.

Dopo un po’ di tentativi ho trovato un’altro workaround che per me ha risolto definitivamente il problema, al posto di applicare il fading al div che contiene le news gli ho inserito all’interno un altro div posizionato al di sopra del testo con un background-color (nel mio caso grigio come lo sfondo del sito) e faccio il fading solo di quel div.

Vediamolo con un po di codice, il div con le news da ciclare iniziale

<div id="newsFlash">
  <div>
    <h5>Titolo</h5>
    <div class="testoFlash">Testo News</div>
  </div>
  <div>
    <h5>Titolo</h5>
    <div class="testoFlash">Testo News</div>
  </div>
</div>

ai div delle singole news ho aggiunto un div vuoto con il background

<div id="newsFlash">
  <div style="display:none; position:relative;">
    <div style="background-color: #FFF; width: 100%; height: 100%; position:absolute; top:0px; left:0px;"> </div>
    <h5>Titolo</h5>
    <div class="testoFlash">Testo News</div>
  </div>
  <div style="display:none; position:relative;">
    <div style="background-color: #FFF; width: 100%; height: 100%; position:absolute; top:0px; left:0px;"> </div>
    <h5>Titolo</h5>
    <div class="testoFlash">Testo News</div>
  </div>
</div>

ora vediamo lo script che si occupa del fading

jQuery(document).ready(function($) {
  newsFlash(true);
});
function newsFlash(init){
  if(init){ //Alla prima chiamata mostra il primo div con le news e nasconde il div con il background
    jQuery('#newsFlash>div:first').show();
    jQuery('#newsFlash>div:first>div:first').hide();
  }
  setTimeout(function(){ //faccio partire un timeout di 5 secondi che farà il ciclo
    o = jQuery('#newsFlash>div:visible:first'); //prende la news visualizzata
    fade = jQuery('#newsFlash>div:visible:first>div:first'); //e il relativo div con il background
    fade.fadeIn("fast",function(){ //faccio apparire il div con il background della news corrente
      // al termine del fadeIn carico nella variabile next la prossima news da visualizzare
      if(o.next().html()==null){
        next = jQuery(\'#newsFlash>div:hidden:first\');
      } else {
        next = o.next();
      }
      o.hide(); //nascondo la news corrente
      fade.show(); //mostro il div con il background della prossima news
      next.show(); //e mostro la prossima news
      next.find(":first").fadeOut("fast"); //ora faccio fare il fadeOut il div con il background
    });
    newsFlash(false); //richiamo in modo ricorsivo la funzione
  },5000);
}

con questo sistema Explorer renderizza correttamente il fading senza sgranare i font e funziona su tutti i principali browser come Firefox Chrome e Safari.

Condividi:
  • Facebook
  • Twitter
  • Google Bookmarks
  • Digg
  • StumbleUpon
  • del.icio.us
  • Yahoo! Buzz
  • Print
  • email

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Connect with Facebook