Fixed text Addictive when jquery animate disappears on chrome

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 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 :)

+3


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) http://jsfiddle.net/FSkXL/

  • set the element to 0.9 instead of 1. This will prevent the text from changing (more consistent), keeping it "weird" http://jsfiddle.net/7YNhM/

  • 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.

+11


source


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() {
   $("#lol").
   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:

#lol
{
   opacity:1;
}
#lol:hover
{
   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 */
}

      

0


source







All Articles