Bug Tracker

Opened 9 years ago

Closed 9 years ago

Last modified 9 years ago

#9222 closed bug (patchwelcome)

animating opacity of tr-elements blinks in FF4

Reported by: Trve Owned by: Trve
Priority: high Milestone: 1.6.2
Component: effects Version: 1.6
Keywords: Cc:
Blocked by: Blocking:

Description

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.

Change History (11)

comment:1 Changed 9 years ago by Trve

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

Last edited 9 years ago by Trve (previous) (diff)

comment:2 Changed 9 years ago by 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 ;)

Last edited 9 years ago by Trve (previous) (diff)

comment:3 Changed 9 years ago by Trve

this comment removed. missuse by myself.

Last edited 9 years ago by Trve (previous) (diff)

comment:4 Changed 9 years ago by 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 ...)

comment:5 Changed 9 years ago by timmywil

Component: unfiledeffects
Owner: set to Trve
Priority: undecidedlow
Status: newpending

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.

comment:6 Changed 9 years ago by Trve

Status: pendingnew

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

comment:7 Changed 9 years ago by timmywil

Priority: lowhigh
Status: newopen

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

comment:8 Changed 9 years ago by timmywil

Milestone: 1.next1.6.2

comment:9 Changed 9 years ago by timmywil

Resolution: patchwelcome
Status: openclosed

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.

comment:10 Changed 9 years ago by 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

Last edited 9 years ago by gnarf (previous) (diff)

comment:11 Changed 9 years ago by 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.

Note: See TracTickets for help on using tickets.