**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](http://desmond.imageshack.us/Himg638/scaled.php?server=638&filename=imgbtq.png&res=medium)

**solution:** setting -khtml-opacity:0.99; and on mouseleave set it to 0.99. safari and chrome will work fine :)