jQuery: Internet Explorer 8 e trasparenza PNG

Internet Explorer 8 mostra dei limiti nella gestione della trasparenza delle immagini PNG quando tali immagini vengono usate in animazioni jQuery. Il problema è stato descritto in dettaglio in questa discussione sul forum di Stack Overflow. In pratica IE8 mostra attorno alle immagini un contorno nero quando deve passare da uno stato di opacità zero ad uno stato di opacità uno (ossia da trasparente a opaco). In tale discussione vengono proposte varie soluzioni al problema descritto. Di seguito riporto le soluzioni che sinora si sono rivelate più efficaci sui siti in cui le ho testate.

La soluzione è la seguente:

function fixPNGs(){
  if(jQuery.browser.msie && jQuery.browser.version < 9){ 
 var i;
 //alert(document.images.length);
 for(i in document.images){
   if(document.images[i].src){
  var imgSrc = document.images[i].src;
  if(imgSrc.substr(imgSrc.length-4) === '.png' || imgSrc.substr(imgSrc.length-4) === '.PNG'){
  document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
  }
   }
 } 
  }
}

Questa soluzione si applica a tutte le immagini PNG inserite tramite l'elemento img.. Una variante di tale soluzione è la seguente:

function fixIETransparency(element) {
    var arr = new Array();
    $(element+' img').each( function(index) {
        arr[index] = new Image();
        arr[index].src = this.src;

        if ( $.browser.msie ) {
            this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(
             enabled='true',
             sizingMethod='image',src='"+ this.src +"')"; 
        }
    });

}

Se invece le immagini PNG vengono usate come sfondo CSS tramite la proprietà background (o background-image) potete usare la seguente soluzione:

$.fn.pngFix = function() {
  if (!$.browser.msie || $.browser.version >= 9) { return $(this); }

  return $(this).each(function() {
    var img = $(this),
        src = img.attr('src');

    img.attr('src', '/images/general/transparent.gif')
        .css('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + src + "')");
  });
};

In tal caso dovrete creare un'immagine GIF trasparente da usare con quest'ultima soluzione, il cui uso è il seguente:

$('#test').pngFix();