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 :)
source to share
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.
source to share
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 */
}
source to share