Fixed text Addictive when jquery animate disappears on chrome


$(function() {

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


    },function() {






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



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


In Firefox and Internet Explorer it works fine, but in Chrome the text gets weird when it fades out - it looks like this text is losing cleartype.

How can I fix this?

What it looks like on fade: Click to see

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


source to share

2 answers

You can't fix it to be happy, but you have options.

  • set webkit backface to hidden (same as below-ish, I also find this fixes many webkit display errors)

  • set the element to 0.9 instead of 1. This will prevent the text from changing (more consistent), keeping it "weird"

  • you can use an image instead of text, png or svg, which means the text will not be editable web text

  • canvas tag, tons of extra complexity

This is a fundamental part of how chrome renders text, and there simply isn't a clean path there.



This works great for me: the text doesn't change. Others can confirm by looking at the jsFiddle .

But I have encountered this error before. With animations I found, Chrome sometimes blurs or deforms text (also does this with CSS3 transitions). I think it is about hardware acceleration and graphics settings.

As another user pointed out in this post , Chrome seems to be having trouble with the jQuery hover () event, so maybe you can use different methods:

$(function() {
   mouseenter(function(){$(this).animate({opacity:0.5}, 900);}).
   mouseleave(function(){$(this).animate({opacity:1}, 900);});


You can also take a snapshot to replicate the same functionality, but with CSS3:

   transition: opacity:0.5;
   -moz-transition: opacity:0.5; /* Firefox 4 */
   -webkit-transition: opacity:0.5; /* Safari and Chrome */
   -o-transition: opacity:0.5; /* Opera */




All Articles