IE está perdiendo ClearType

¡Estoy experimentando algo realmente extraño!IE está perdiendo ClearType

Tengo un div que me estoy escondiendo con JS (jQuery). De esta manera:

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

Luego, cuando me hacen una fadeIn así:

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

continuación, el texto pierde ClearType en IE pero no en FF. Si voy con el botón insteted de fadeIn, todo está bien.

¿Qué es IE y hay alguna solución para él porque se ve horrible. (tengo ClearType en la medida que tal vez entender en este punto)

Fuente

2009-01-04 Adis

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

jQuery fadeIn/fadeOut IE cleartype glitch

El problema parece ser que el "filtro" atributo CSS no se elimina automáticamente. La solución más sencilla a este problema sería la eliminación de forma manual:

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

A medida que la entrada en el blog anterior explica, esta es una solución bastante desordenado.

Extracto de la entrada del blog, incluyendo una solución limpiador a este problema:

Esto significa que cada vez que quiere desaparecer un elemento, tenemos que quitar el atributo de filtro, que hace que nuestro código parezca desordenado.

Una solución simple, más elegante sería ser para envolver funciones el .fadeIn() y .fadeOut() con una función personalizada a través de la interfaz de complementos de jQuery. El código sería exactamente el mismo , pero en lugar de llamar directamente a las funciones de fundido, llamamos al contenedor . De este modo:

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

Así que, ¿cómo se consigue este trabajo? Solo incluye el siguiente código después de que incluya la biblioteca jQuery para la 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);

Fuente

2009-01-04 14:34:00

grr ¿Por qué no pueden poner esto en el fadeIn estándar? Acabo de confirmar que no está en 1.3.1 (al menos no sin requerir configuración adicional) así que probablemente no haya –

, incluso con esta solución todavía se ve bastante horrible en mi opinión. es evidente que hay un problema. Lo mejor es intentar lo más posible para desvanecerse en cuadros de colores y dejar que el texto aparezca instantáneamente –

A partir de jQuery 1.9, el identificador jQuery.browser está en desuso. Impresionante ... :-(¿Alguna sugerencia de cómo implementar el código anterior a través de "detección de características" en lugar de "detección de navegador"? – ClearCloud8

Cuando se desvanecen se aplica a IE, que es la aplicación que (por lo menos a través de jQuery) la clase dxtransform, lo que hará que pierda ningún efecto antialiasing hasta su opacidad está de vuelta a uno.

Fuente

2009-01-04 14:33:27 SuperRoach

He leído Firefox 2 utiliza su propio motor de renderizado de texto cada vez que se aplica la opacidad (al menos en un Mac). Esto a veces parece extraño.

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

body { 
    -moz-opacity: 0.99; 
}

Esto puede trabajo en IE también. Oh, pero necesitarás usar la propiedad de propiedad de IE filter.

Fuente

2009-01-04 14:37:15 alex

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

Fuente

2009-01-04 15:02:15 redsquare

no funcionó para mí en IE7 en vista –

Esto ha funcionado para mí el par de veces que he encontrar el problema. Creo que debes establecer el color de fondo en el elemento que se está desvaneciendo dentro o fuera. –

-1

autorización aquí es mi peor solución nunca:

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

<body> 

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

    body text 
</body>

ocultarán el cuerpo, y se desvanecen en cuando el documento está completo. Entonces esencialmente deshabilitas el tipo de letra.

Oh y POR FAVOR, nadie lo haga. O si REALMENTE parece tener sentido para usted, pruébelo bien. Solo recuerde que no verá nada hasta que todo el DOM esté cargado. También vi algunas fallas técnicas gráficas extrañas.

Fuente

2009-01-26 11:55:32

He logrado obtener una solución un tanto 'genérica'. removeAttribute no funciona si la opacidad es entre 0 y 1, por lo que mi solución de dos céntimos de la siguiente manera:

Pon este código justo después de la primera línea de jQuery animar definición del método (jquery.xxxjs)

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 

    ...

Esperamos que esto ayude ...

Fuente

2012-01-09 11:48:30 Rogi

he conseguido tirar de una solución un tanto 'genérico'. removeAttribute no funciona si la opacidad es entre 0 y 1, por lo que mi solución de dos céntimos de la siguiente manera:

Pon este código justo después de la primera línea de jQuery animar definición del método (jquery.xxxjs)

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 ...

Fuente

2012-01-10 13:07:25 Rogi

Respuesta

Cuestiones relacionadas