1

I am trying to animate a text opacity with jQuery animate. I've noticed that when opacity value is set to 1, a bad anti-aliasing effect appears after animation in Chrome (version 35.0.1916.153): see image below.

Opacity antialiasing effect in Chrome

$('#good').animate({
    opacity:'0.99'
}, 2000);

$('#bad').animate({
    opacity:'1'
}, 2000);

jsFiddle

I've tested it in Safari (version 5.1.7), Firefox (version 18.0.1) and it works well. I've tried to add the font smoothing filter suggested here but it doesn't seem to work. Is it a known issue?

Zoe
  • 27,060
  • 21
  • 118
  • 148
Giorgio
  • 1,940
  • 5
  • 39
  • 64

1 Answers1

1

JSFIDDLE with div

$( document ).ready(function() {
   $('#good').animate({opacity: 0.4}, 2000, false, null);
    $('#bad').animate({opacity: 1}, 2000, false, null);
});

JSFIDDLE with <p>

Your mistake is you dont use ready event

I recomended use css animation without JS CSS ANIMATION JSFIDDLE

.pick-opacity_1 {
    -webkit-animation: opacity_1 2s;
    -webkit-animation-direction: alternate;
    -webkit-animation-iteration-count: 1;
}

@-webkit-keyframes opacity_1 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.pick-opacity_2 {
    -webkit-animation: opacity_2 5s;
    -webkit-animation-direction: alternate;
    -webkit-animation-iteration-count: 1;
}

@-webkit-keyframes opacity_2 {
    0% {
        opacity: 1;
    }
    25% {
        opacity: 0.1;
    }
    50% {
        opacity: 0.3;
    }

    75% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

UPDATED: TEST 0.99 JSFIDDLE ANIMATION OPACITY

isxaker
  • 8,446
  • 12
  • 60
  • 87
  • Thanks, but my goal is to set opacity to 1 (and this is the value where the issue happens). – Giorgio Jun 26 '14 at 07:18
  • Unfortunately it doesn't work, I've added an image to OP to clarify the issue. Even using document ready (and setting `#good` opacity to 0.99 to make a comparison), the effect is the same. – Giorgio Jun 26 '14 at 07:32
  • @Giorgio, my link with jsFIddle is work on your laptop? – isxaker Jun 26 '14 at 07:43
  • Mikail, your last fiddle works because you set opacity to 0.99, not 1. If 0.99 (which was my initial workaround) works, I'll use it. But the goal of my question was: is opacity:1 a known bug for Chrome? – Giorgio Jun 26 '14 at 07:46
  • @Giorgio, my chrome work fine with opacity to 1 animation.(35.0.1916.153 m) – isxaker Jun 26 '14 at 07:49
  • Mikail, I trust you, even if I still see the problem. So maybe it's not a browser problem (and actually now I don't have any clue of what it may be). +1 for your help. – Giorgio Jun 26 '14 at 07:53