animating opacity of tr-elements blinks in FF4

[Trve]

I have a bug animating the opacity from a tr-element from 0 to 1.

$('.additional_tickets').animate({opacity: 1, duration: 1000});

This is my code.

This css-class matches the tr-elements I added to a table using jQuery. The have been added correctly.

After I add them I animate the opacity using $.animate() to change it (given via css) from 0 to 1. The animation itself works fine, but at the end, after it's done, it suddenly sets the opacity to 0 (you can see everything behind) for a very short time (a few hundret milliseconds) and then sets it back to 1 again.

This looks like it woult blink once.

I testet this with Safari 5.0.5, Chrome 11.0.696.65 and Firefox 4.0.1 on my Mac (OS X 10.6.7). In Chrome and Safari it works perfectly as expected, just in FF4 it blinks.

Hope you can fix it.

[Trve]

[link to example-code removed, see jsfiddle-link below]

[Trve]

Ah, what I forgot: now I tested it with Firefox 4.0.1 on windows XP SP3 also, and there it is the same blinking-bug.

PS: sorry for double-posting, I'm new here. just got it. next time i'll do it better ;)

[Trve]

this comment removed. missuse by myself.

[Trve]

ah, didn't see it: there is a typo in my initial post. it has to be:

$('.additional_tickets').animate({opacity: 1}, {duration: 1000});

but this doesn't effect my reported bug. it's still buggy.

(and sorry for my spamming here ...)

[timmywil]

Thanks for taking the time to contribute to the jQuery project! Please provide a reduced test case on ​http://jsfiddle.net that reproduces the issue experienced to help us assess your ticket.

Additionally, test against the jQuery (edge) version to ensure the issue still exists.

[Trve]

here the reduced code example: ​http://jsfiddle.net/FesEG/

[timmywil]

Confirmed. Reduced a little further: ​http://jsfiddle.net/FesEG/1/

[timmywil]

gnarf looked into this and tried this: ​http://jsfiddle.net/FesEG/3/

This means we can't fix this because firefox is simply doing a flash when opacity is set to 1 after having been set to something between 0 and 1, but if anyone comes up with some way to make this more fluid and get rid of the flash, we would welcome it. For now, we'll report this issue to firefox.

[gnarf]

Just to add a bit more to this, I removed a bunch of the extra css and made it using pure JS only (no jQuery)

​http://jsfiddle.net/FesEG/5/

Reported to Mozilla - ​https://bugzilla.mozilla.org/show_bug.cgi?id=656948

[kswedberg]

@Trve: FF2.x had a bug with opacity that made text look janky when you animated it to 1.0. A hackish workaround was to aimate to .9999 instead. That appears to work in this situation as well: ​http://jsfiddle.net/gnarf/FesEG/7/

It's not ideal, and Moz should fix this one, but might be worth doing in the meantime.