JQuery Fadein/Fadeout, ou seja, ClearType Glitch Como consertar a transição
-
27-09-2019 - |
Pergunta
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?
Solução
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.
Outras dicas
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.
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!