Internet Explorer sta perdendo ClearType

Question

Sto vivendo qualcosa di veramente strano!

Ho un div che sto nascondendo con JS (jQuery). In questo modo:

$('#myDiv').hide();

Quindi quando faccio una dissolvenza in questo modo:

$("#myDiv").fadeIn('slow');

quindi il testo perde ClearType in IE ma non in FF. Se vado con l'istanza di fadeIn attiva, allora va tutto bene.

Cosa sta facendo IE e c'è qualche soluzione perché sembra orribile. (ho ClearType su come forse capirai a questo punto)

Answer 1

Una rapida ricerca sull'argomento mostra quanto segue:

jQuery fadeIn / fadeOut IE cleartype glitch

Il problema sembra essere che il CSS " filter " l'attributo non viene rimosso automaticamente. La soluzione più semplice a questo problema sarebbe rimuoverlo manualmente:

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

Come spiega il post sul blog sopra, questa è una soluzione piuttosto disordinata.

Estratto dal post del blog, inclusa una soluzione più pulita a questo problema:

  

Ciò significa che ogni volta noi   vogliamo sbiadire un elemento, dobbiamo   rimuovere l'attributo filter, che   rende il nostro codice disordinato.

     

Una soluzione semplice ed elegante sarebbe   essere per avvolgere .fadeIn () e   .fadeOut () funziona con una personalizzazione   tramite l'interfaccia del plugin di   jQuery. Il codice sarebbe esattamente il   lo stesso, ma invece di chiamare direttamente   le funzioni di dissolvenza, che chiamiamo   wrapper. In questo modo:

$('#node').customFadeOut('slow', function() { 
   //no more fiddling with attributes here
});

  

Quindi, come si fa a farlo funzionare? Appena   includi il seguente codice dopo di te   include la libreria jQuery per il   funzionalità aggiunta.

(function($) {
    $.fn.customFadeIn = function(speed, callback) {
        $(this).fadeIn(speed, function() {
            if(jQuery.browser.msie)
                $(this).get(0).style.removeAttribute('filter');
            if(callback != undefined)
                callback();
        });
    };
    $.fn.customFadeOut = function(speed, callback) {
        $(this).fadeOut(speed, function() {
            if(jQuery.browser.msie)
                $(this).get(0).style.removeAttribute('filter');
            if(callback != undefined)
                callback();
        });
    };
})(jQuery);

Answer 2

Un modo è quello di impostare un colore di sfondo sul div (normalmente) bianco.

Answer 3

Quando la dissolvenza viene applicata a IE, la applica (almeno tramite jquery) la classe dxtransform, che le farà perdere tutti gli effetti antialiasing fino a quando la sua opacità non tornerà a uno.

Answer 4

Sono riuscito a trovare una soluzione un po '"generica". removeAttribute non funziona se l'opacità è compresa tra 0 e 1, quindi la mia soluzione a due centesimi segue:

Inserisci questo codice subito dopo la prima riga della definizione del metodo jQuery animate (jquery.x.x.x.js)

animate: function( prop, speed, easing, callback ) {
var optall = jQuery.speed(speed, easing, callback);

/*
 * IE rendering anti-aliasing text fix.
 */
// fix START
var old_complete_callback = optall.complete;
optall = jQuery.extend( optall, {complete: function(){
        if (jQuery.browser.msie) {
            var alpha = $(this).css('opacity');
        if(alpha == 1 || alpha == 0) {
            this.style.removeAttribute('filter');
        }
        }
        if (jQuery.isFunction(old_complete_callback)) {
        old_complete_callback.call(this);
        }
    }
});
// fix END

    ...

Spero che questo possa aiutare ...

Answer 5

Sono riuscito a trovare una soluzione un po '"generica". removeAttribute non funziona se l'opacità è compresa tra 0 e 1, quindi la mia soluzione a due centesimi segue:

Inserisci questo codice subito dopo la prima riga della definizione del metodo jQuery animate (jquery.x.x.x.js)

animate: function( prop, speed, easing, callback ) {
var optall = jQuery.speed(speed, easing, callback);

/*
 * IE rendering anti-aliasing text fix.
 */
// fix START
var old_complete_callback = optall.complete;
optall = jQuery.extend( optall, {complete: function(){
    if (jQuery.browser.msie) {
        var alpha = $(this).css('opacity');
        if(alpha == 1 || alpha == 0) {
            this.style.removeAttribute('filter');
        }
    }
    if (jQuery.isFunction(old_complete_callback)) {
        old_complete_callback.call(this);
    }
}});
// fix END

...

Spero che questo possa aiutare ...

Answer 6

Ho letto che Firefox 2 utilizza il proprio motore di rendering del testo ogni volta che viene applicata l'opacità (almeno su un Mac). Questo a volte sembra strano.

Ho combattuto questo con questo CSS (e non sembra influenzare affatto le prestazioni)

body {
   -moz-opacity: 0.99;
}

Questo potrebbe funzionare anche in IE. Oh, ma dovrai usare la proprietà filter di IE.

Answer 7

Ok, ecco la mia peggior soluzione di sempre:

<head>
    <script>
        $(function() {
                $(document.body).fadeIn(0);
        });
    </script>
</head>

<body>

    <script>
        $(document.body).hide();
    </script>

    body text
</body>

Nascondi immediatamente il corpo e sfumalo quando il documento è completo. Quindi essenzialmente disabiliti cleartype.

Oh e PER FAVORE, nessuno lo faccia acutamente. O se VERAMENTE sembra avere un senso per te, allora prova bene. Ricorda solo che non vedrai nulla finché non verrà caricato l'intero DOM. Ho anche visto alcuni strani difetti grafici.