jquery - IE está perdiendo ClearType
internet-explorer (7)
Cuando se aplica fade a IE, se está aplicando (al menos a través de jquery) la clase dxtransform, que hará que pierda cualquier efecto antialiasing hasta que su opacidad vuelva a ser uno.
¡Estoy experimentando algo realmente extraño!
Tengo un div que me estoy escondiendo con JS (jQuery). Me gusta esto:
$(''#myDiv'').hide();
Entonces cuando hago un fadeIn como este:
$("#myDiv").fadeIn(''slow'');
entonces el texto pierde ClearType en IE pero no en FF. Si voy con el botón insteted de fadeIn, todo está bien.
¿Qué está haciendo IE y hay soluciones para eso porque se ve horrible? (Tengo ClearType puesto que tal vez entiendas en este momento)
Una búsqueda rápida sobre el tema muestra lo siguiente:
jQuery fadeIn / fadeOut IE cleartype glitch
El problema parece ser que el atributo CSS "filtro" no se elimina automáticamente. La solución más simple a este problema sería eliminarlo manualmente:
$(''#myDiv'').fadeIn(''slow'', function() {
this.style.removeAttribute(''filter'');
});
Como explica la entrada del blog anterior, esta es una solución bastante desordenada.
Extracto de la entrada del blog, que incluye una solución más limpia a este problema:
Esto significa que cada vez que queremos fundir un elemento, debemos eliminar el atributo de filtro, lo que hace que nuestro código se vea desordenado.
Una solución simple y más elegante sería ajustar las funciones .fadeIn () y .fadeOut () con una función personalizada a través de la interfaz de complemento de jQuery. El código sería exactamente el mismo, pero en lugar de llamar directamente a las funciones de fundido, llamamos al envoltorio. Al igual que:
$(''#node'').customFadeOut(''slow'', function() {
//no more fiddling with attributes here
});
Entonces, ¿cómo haces que esto funcione? Simplemente incluya el siguiente código después de incluir 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);
Una forma es establecer un color de fondo en el div (normalmente) blanco.
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 descálmelo cuando el documento esté completo. Entonces esencialmente deshabilitas el tipo de letra.
Ah, 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.
He leído que Firefox 2 usa su propio motor de renderizado de texto siempre que se aplica opacidad (al menos en una Mac). Esto a veces parece extraño.
Combatí esto con este CSS (y no parece afectar el rendimiento en absoluto)
body {
-moz-opacity: 0.99;
}
Esto también puede funcionar en IE. Oh, pero necesitarás usar la propiedad de filter propiedad de IE.
Logré obtener una solución un tanto ''genérica''. removeAttribute no funciona si la opacidad está entre 0 y 1, entonces mi solución de dos centavos sigue:
Coloque este código justo después de la primera línea de la definición del método de jQuery animado (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 ...
Logré obtener una solución un tanto ''genérica''. removeAttribute no funciona si la opacidad está entre 0 y 1, entonces mi solución de dos centavos sigue:
Coloque este código justo después de la primera línea de la definición del método de jQuery animado (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 ...