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

Question

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

Answer 1

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.

Answer 2

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;

Answer 3

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

-webkit-opacity: .99;

Answer 4

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"