IE está perdendo ClearType

Question

Eu estou experimentando algo realmente estranho!

Eu tenho uma div que eu estou me escondendo com JS (jQuery). Como esta:

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

Então, quando eu faço uma fadeIn como este:

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

, em seguida, o texto perde ClearType no IE, mas não no FF. Se eu ir com alternância insted de fadeIn, então está tudo bem.

O que é IE até e há quaisquer soluções para isso porque parece horrível. (eu tenho ClearType sobre como você talvez compreender neste momento)

Answer 1

Uma busca rápida nos programas sujeitos ao seguinte:

jQuery fadeIn / fadeOut IE cleartype falha

O problema parece ser que o atributo "filtro" CSS não é removido automaticamente. A solução mais simples para este problema seria removê-lo manualmente:

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

Como o post acima explica, esta é uma solução um pouco confuso.

Trecho do post, incluindo uma solução mais limpa para este problema:

Isto significa que todos os nós do tempo quer a desvanecer-se um elemento, precisamos remover o atributo de filtro, que torna o nosso confuso código visual.

Um simples, solução mais elegante seria ser para embrulhar o .fadeIn () e .fadeOut () funções com um costume função através da interface de encaixe de jQuery. O código seria exatamente o mesmo, mas em vez de chamar diretamente as funções de fade, que chamamos de embrulho. Como assim:

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

Então, como você começar este trabalho? Somente incluir o seguinte código depois de incluir a biblioteca jQuery para o funcionalidades adicionais.

(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

Uma maneira é definir uma cor de fundo sobre a div (normalmente) branco.

Answer 3

Quando Fade será aplicada a IE, é aplicá-lo (pelo menos via jquery) a classe dxtransform, que irá torná-lo perder quaisquer efeitos suavização até sua opacidade está de volta para um.

Answer 4

Eu consegui puxar uma solução um tanto 'genérico'. removeAttribute não funciona se a opacidade é entre 0 e 1, então meus dois centavos solução seguinte:

Coloque este código logo após a primeira linha de jQuery definição do método animado (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

    ...

Esperamos que isso ajude ...

Answer 5

Eu consegui puxar uma solução um tanto 'genérico'. removeAttribute não funciona se a opacidade é entre 0 e 1, então meus dois centavos solução seguinte:

colocar esse código logo após a primeira linha de definição do 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

...

Esperamos que isso ajude ...

Answer 6

Eu li Firefox 2 Utiliza o seu próprio motor de renderização de texto sempre que a opacidade é aplicada (pelo menos em um Mac). Isto às vezes parecem estranhas.

Eu tenho combatido este com este CSS (e ele não parece afetar o desempenho em tudo)

body {
   -moz-opacity: 0.99;
}

Este pode trabalho no IE também. Oh mas você vai precisar de usar a propriedade decoro filter do IE.

Answer 7

Ok aqui está o meu pior solução sempre:

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

<body>

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

    body text
</body>

esconder Imediatamente o corpo, e fade-lo em quando o documento está completo. Então você essencialmente desativar ClearType.

Oh e Por favor, não qualquer um actaully fazer isso. Ou se ele realmente parece fazer sentido para você, em seguida, testá-lo bem. Basta lembrar que você não vai ver nada até que todo o DOM é carregado. Eu também vi algumas falhas gráficas estranhas.