CODEWITHSUNDEEP
jqueryfadein
mix
mix

Reputation: 7151

end of jquery fadeIn() has a 'bump' in Chrome

I'm using a very simple fadeIn and fadeOut in Chrome. I just want one text element to fade out and another to fade in. Working example: http://jsfiddle.net/forgetcolor/7eR5Q/

The problem I'm having is that at the end of the fadeIn() there is an abrupt transition to the end state. I call it a 'bump'. The element fadesIn smoothly, but right at the end it loses that smoothness and finishes the fade all at once.

Is there a way to avoid this?

var cur = 1;
$('#btn').click(function() {

    if (cur == 1) {
        $('#txt1').fadeOut(500, function() {
            $('#txt2').fadeIn(500);
        });
        cur = 2;
    } else if (cur == 2) {
        $('#txt2').fadeOut(500, function() {
            $('#txt1').fadeIn(500);
        });
        cur = 1;
    }
});​

body {
    background-color:#666;
    color:white;
    font-size:20px;
    margin:20px;
}
#txt2 {display:none;}​

<div id="txt1">txt1</div>
<div id="txt2">txt2</div>
<br/><div id="btn">btn</div>​

UPDATE:

Here's a video: http://www.youtube.com/watch?v=n2IGED0pkVg

My Chrome version number is 20.0.1132.21 beta (latest right now) on OSX

Chrome bug report submitted: https://code.google.com/p/chromium/issues/detail?id=130801

Upvotes: 2

Views: 1917

Answers (4)

Josh
Josh

Reputation: 949

For future users who come across this, I found this solution worked for me.

-webkit-opacity: .99;

Upvotes: 0

e382df99a7950919789725ceeec126
e382df99a7950919789725ceeec126

Reputation: 5981

It seems to be the font smooth rendering bugging on macbooks. Here is an question from stackoverflow of it.

Edit: you can improve you font rendering with font smoothing in antialiased (spec) mode. And here is an article why you shouldn't use it in general.

-webkit-font-smoothing: antialiased;

Upvotes: 0

box86rowh
box86rowh

Reputation: 3415

If I go ahead and turn off the webkit font smoothing, the dissolve works great: http://jsfiddle.net/7eR5Q/19/ So apparantly it removes the smoothing during the transition and adds it after causing the "bump"

Upvotes: 1

Jason Kulatunga
Jason Kulatunga

Reputation: 5894

If you feel like the fadeIn is happening too quickly, increase the time up to 600, 

$('#txt1').fadeIn(600); and $('#txt2').fadeIn(600);

seemed a bit more even for me.

Upvotes: 0

Related Questions