Content is invisible for half a second when aborting jQuery.fadeTo in Firefox only

animation, jquery, jquery-ui

Solution

Simply hiding, forcing a reflow and then showing it again did the trick for me at least in firefox 13:

function showIt(message) {
    var div = $("div");
    div.empty().append(message).stop().hide();
    div[0].offsetWidth; //Force reflow, required
    div.show().css('opacity', 1);
}

http://jsfiddle.net/d6mmZ/28/

Problem

Here's the JsFiddle: http://jsfiddle.net/d6mmZ/7/ Clicking links 1 and 2 updates the text instantly. Clicking link 3 starts a slow fade-out. If I click link 1 or 2 during this time, the animation is supposed to be aborted and the new text shown instantly. In Chrome, that's exactly what happens. In Firefox 13/14, there is a half second pause during which the content is completely invisible. If I let the fade complete, links 1 and 2 work instantly. Is this a Firefox/jQuery bug or am I mis-using fade? If a bug, can I work around this somehow?

Original source