JQuery Fadein/Fadeout, ou seja, ClearType Glitch Como consertar a transição

Question

Bem, este é um bug bem conhecido com o IE e o jQuery:

Ou seja, está perdendo ClearType

O que estou perguntando: é possível remover esse efeito de transição feia, antes que a "correção" seja aplicada. Teste isso no IE:

http://www.kevinleary.net/wp-samples/ie-fade-problems.php

Embora seja uma solução para um problema pior, é possível corrigir essa transição e o flash do conteúdo do "tipo não claro"?

Não me incomodaria muito, mas é para o meu menu principal de sites em jQuery (superfish) - essas transições são praticamente visíveis ...

EDIT: Apenas uma coisa a perceber - isso acontece também nos seus navegadores? Talvez seja algo nas configurações do IE?

Answer 1

Não há como consertar o ClearType ficando feio enquanto O desbotamento acontece nesse conteúdo. Esta é apenas uma decisão ruim (IMO) que a equipe do IE tomou sobre como implementar seu filtro de opacidade (Direct X, que a maneira como é implementada no IE não suporta o ClearType).

A única outra opção que funciona bem é desaparecer algo senão, como um <div> Além disso, desaparece, em vez do seu conteúdo com o texto desaparecendo ... mas você disse que seu uso é para um menu, de modo que não se aplicaria aqui.

Answer 2

Eu li todos os tipos de soluções em potencial para o problema do Internet Explorer, mas nada parecia funcionar.

Por fim, decidi ir com a sobreposição de div Div absolutamente posicionada, conforme descrito neste tópico. Eu tenho uma altura dinâmica, no entanto, usei o jQuery para mudar a altura da div antes do desaparecimento. Meu código acabou parecendo algo assim:

$("#fade-canvas").css('height',$("#wrapper").height()+'px').show();
     /* HIDE or SHOW wrapper child elements as needed */
$("#fade-canvas").css('height',$("#wrapper").height()+'px').fadeOut(600);

Puxou meu cabelo para fora com esse problema, então espero que isso ajude alguém.

Answer 3

Boa solução Nick!

Vários scripts implementaram correções (como ciclo), mas atualmente a melhor opção que encontrei para corrigir o texto pixelizado durante as animações é exatamente o que Nick recomenda: sobrepor uma div em vez de desbotar o próprio texto.

Desculpe, eu não poderia ter mais ajuda para Sapphire, mas obrigado pela leitura!