Text Getting weird when jquery animate fade on chrome

Posted by Robson Silveira on Stack Overflow See other posts from Stack Overflow or by Robson Silveira
Published on 2012-03-31T22:49:00Z Indexed on 2012/03/31 23:30 UTC
Read the original article Hit count: 293

Filed under:
|
|

JavaScript

$(function() {

    $('#lol').hover(function() {

        $(this).stop().animate({opacity:0.5});

    },function() {

        $(this).stop().animate({opacity:1});

    });

});

CSS

#lol {
padding:20px; background-color:#FF0000; color:#FFF; font-size:15px; font-family:arial; width:300px; opacity:1; filter:alpha(opacity=100); position:relative;
}

HTML

<div id="lol">text</div>

In Firefox and Internet Explorer it works fine but in Chrome, the text get weird on fade -- it look like that text is losing cleartype.

How can I fix it?

How it looks on fade: Click to see

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about google-chrome