IE está perdiendo ClearType

Question

¡Estoy experimentando algo realmente extraño!

Tengo un div que estoy ocultando con JS (jQuery). Así:

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

Luego, cuando hago un fundido de entrada como este:

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

entonces el texto pierde ClearType en IE pero no en FF. Si voy con alternar en lugar de fadeIn, entonces está todo bien.

¿Qué está haciendo IE y hay alguna solución para ello porque se ve horrible? (Tengo ClearType activado como tal vez entiendas en este momento)

Answer 1

Una búsqueda rápida sobre el tema muestra lo siguiente:

jQuery fadeIn / fadeOut IE cleartype glitch

El problema parece ser que el CSS '' filtro '' El atributo no se elimina automáticamente. La solución más simple para este problema sería eliminarlo manualmente:

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

Como explica la publicación de blog anterior, esta es una solución bastante desordenada.

Extracto de la publicación del blog, que incluye una solución más limpia para este problema:

  

Esto significa que cada vez que   queremos desvanecer un elemento, necesitamos   eliminar el atributo de filtro, que   hace que nuestro código se vea desordenado.

     

Una solución simple y más elegante   ser para envolver el .fadeIn () y   .fadeOut () funciona con una costumbre   funcionar a través de la interfaz del complemento de   jQuery. El código sería exactamente el   igual, pero en lugar de llamar directamente   las funciones de desvanecimiento, las llamamos   envoltura. Me gusta así:

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

  

Entonces, ¿cómo haces que esto funcione? Sólo   incluye el siguiente código después de ti   incluir la biblioteca jQuery para el   funcionalidad agregada.

(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

Una forma es establecer un color de fondo en el div (normalmente) blanco.

Answer 3

Cuando se aplica el desvanecimiento a IE, se aplica (al menos a través de jquery) la clase dxtransform, lo que hará que pierda cualquier efecto antialiasing hasta que su opacidad vuelva a ser uno.

Answer 4

He logrado obtener una solución algo 'genérica'. removeAttribute no funciona si la opacidad está entre 0 y 1, por lo que mi solución de dos centavos sigue:

Ponga este código justo después de la primera línea de definición del método animado jQuery (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

    ...

Espero que esto ayude ...

Answer 5

He logrado obtener una solución algo 'genérica'. removeAttribute no funciona si la opacidad está entre 0 y 1, por lo que mi solución de dos centavos sigue:

Ponga este código justo después de la primera línea de la definición del método animado jQuery (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

...

Espero que esto ayude ...

Answer 6

He leído que Firefox 2 usa su propio motor de representación de texto siempre que se aplica opacidad (al menos en una Mac). Esto a veces parece extraño.

He combatido esto con este CSS (y no parece afectar en absoluto el rendimiento)

body {
   -moz-opacity: 0.99;
}

Esto puede funcionar en IE también. Ah, pero necesitará usar la propiedad filter propiedad de IE.

Answer 7

Ok, esta es mi peor solución:

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

<body>

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

    body text
</body>

Oculte inmediatamente el cuerpo y descolórelo cuando el documento esté completo. Entonces esencialmente deshabilita cleartype.

Ah y POR FAVOR, nadie haga esto realmente. O si REALMENTE parece tener sentido para usted, pruébelo bien. Solo recuerda que no verás nada hasta que se cargue todo el DOM. También vi algunos problemas gráficos extraños.