Workaround(remendo) para o bug do jQuery fonte ClearType no IE´cas da vida

Hoje no trabalho me deparei com um novo bug (novo pra min neh =P ),  um estranho bug que faz com que a fonte do texto de um elemento fique zuada no IEca7. ~

Fontes Cleartype.

Cleartype é um tipo de fonte usada no Windows e IE7 que implementa uma técnica especifica de render chamada subpixel rendering para aumentar a resolução de fontes renderizadas pelos monitores de LCD, legal né, bom para os windows users da vida!

jQuery, Cleartypes IE7 e o bug.

Bom agora que você sabe algo sobre as fontes, vou explicar o que acontece com elas e o javascript(jQuery). Quando usamos a função .fadeIn()/.fadeOut()/.fadeTo() do jQuery para criar um efeito de esmaecimento em algum elemento ou nó do XHTML, essas funções da jQuery fazem uma chamada a uma função do núcleo de bibliotecas do javascript especifica do navegador em uso, no caso aqui, o MSIE7, a função do núcleo javascript chamada é setElementOpacity que por sua vez cria um filtro, para gerar uma opacidade em CSS  usando aquele filtro da Microsoft(DXImageTransform.Alpha ) o mesmo que tenta fazer o remendo do PNG no IEca6, ai já viu né esse filtro ai é “pobrema!” esse filtro faz com que o navegar dispense a fonte Cleartype e use a fonte padrão após o efeito e isso zua com a fonte.  Bom se você não entendeu o bug, leia na integra essa matéria que você concerteza irá entender. Veja um exemplo do bug aqui.

O remendo(workaround).

O remendo para este problema são 2:

O primeiro e mais simples é definir uma cor de fundo para o elemento que recebe o .fadeIn/Out/To() do jQuery.

background-color:#fff;

O segundo é um pouco mais complicado e faz parte da resolução do problema em nivel de javascript, consistem em remover o atributo “filter” do elemento, assim:

document.getElementById('elemento').style.removeAttribute('filter')

Um programador jQuery Benjamin Michael Novakovic criou uma função que pode ser usada para resolver o problema e o com as funções fadeIn() e fadeOut(), já um outro programador Jonathan fez o resto do serviço e implementou também a função fadeTo().

jQuery.fn.fadeIn = function(speed, callback) {
return this.animate({opacity: 'show'}, speed, function() {
if (jQuery.browser.msie)
this.style.removeAttribute('filter');
if (jQuery.isFunction(callback))
callback();
});
};

jQuery.fn.fadeOut = function(speed, callback) {
return this.animate({opacity: 'hide'}, speed, function() {
if (jQuery.browser.msie)
this.style.removeAttribute('filter');
if (jQuery.isFunction(callback))
callback();
});
};

jQuery.fn.fadeTo = function(speed,to,callback) {
return this.animate({opacity: to}, speed, function() {
if (to == 1 && jQuery.browser.msie)
this.style.removeAttribute('filter');
if (jQuery.isFunction(callback))
callback();
});
};

Bom é isso ai espero que ajude você com esse problema.

4 Comentários

Arquivado em bugs, Javascript, jQuery

4 Respostas para “Workaround(remendo) para o bug do jQuery fonte ClearType no IE´cas da vida

  1. Pingback: jQuery fadeIn() & fadeOut() - Bug no Internet Explorer » Pinceladas da Web - XHTML, CSS, JavaScript e WebStandards

  2. Muito bom! Já tenho uso pra ela =D

  3. Boa, não sabia do background-color.
    é a remenda mais feia que eu ja vi, mas é bem útil.
    rsrs…
    Obrigado pelo post.

  4. Pô cara, show de bola.
    Porquê que o pesosal do jQuery ainda não implementou este bugfix ?!

    Mostra lá pros caras!
    Abs.

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s