#9222 closed bug (patchwelcome)

Opened May 10, 2011 10:25PM UTC

Closed May 13, 2011 04:46PM UTC

Last modified May 13, 2011 07:02PM UTC

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.

Attachments (0)

Change History (11)

Changed May 11, 2011 08:46AM UTC by Trve comment:1

_comment0:	Sorry, yesterday I had no time to upload an example of it, but here it is: \ \ http://jquery.pytalhost.com/jquery_bug_9222.html \ \ Just click the link "more" and you will see it. \ \ Hope this is enough, if not than just tell me. → 1305234435997326

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

Changed May 11, 2011 08:48AM UTC by Trve comment:2

_comment0:	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. → 1305103744257706

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 ;)

Changed May 11, 2011 10:08AM UTC by Trve comment:3

_comment0:	While testing it a bit more I recognized that the duration is also not handled correctly. when I set it to 10000 (10 seconds) and use the notation \ {{{ \ $('.additional_tickets').animate({opacity: 1, duration: 10000}); \ }}} \ the animation takes about 1 second, doesn't matter what I set it to, but definitly not 10 seconds. \ \ If i use the notation \ {{{ \ $('.additional_tickets').animate({opacity: 1}, 10000); \ }}} \ the duration itself is handled correctly. \ \ In both cases it still sets the opacity to 0 for a few milliseconds and sets it back to 1 again at the end of the animation. → 1305108925303422
_comment1:	removed. missuse by me. → 1305111006552310

_comment0:

While testing it a bit more I recognized that the duration is also not handled correctly. when I set it to 10000 (10 seconds) and use the notation \ {{{ \ $('.additional_tickets').animate({opacity: 1, duration: 10000}); \ }}} \ the animation takes about 1 second, doesn't matter what I set it to, but definitly not 10 seconds. \ \ If i use the notation \ {{{ \ $('.additional_tickets').animate({opacity: 1}, 10000); \ }}} \ the duration itself is handled correctly. \ \ In both cases it still sets the opacity to 0 for a few milliseconds and sets it back to 1 again at the end of the animation. → 1305108925303422

_comment1:

removed. missuse by me. → 1305111006552310

this comment removed. missuse by myself.

Changed May 11, 2011 02:44PM UTC by Trve comment:4

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 ...)

Changed May 11, 2011 03:05PM UTC by timmywil comment:5

component:	unfiled → effects
owner:	→ Trve
priority:	undecided → low
status:	new → pending

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.

Changed May 12, 2011 09:07AM UTC by Trve comment:6

status:	pending → new

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

Changed May 12, 2011 02:31PM UTC by timmywil comment:7

priority:	low → high
status:	new → open

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

Changed May 12, 2011 02:31PM UTC by timmywil comment:8

milestone:	1.next → 1.6.2

Changed May 13, 2011 04:46PM UTC by timmywil comment:9

resolution:	→ patchwelcome
status:	open → closed

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.

Changed May 13, 2011 04:56PM UTC by gnarf comment:10

_comment0:	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/ \ \ The bug is still present in FF4 → 1305306661560827

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

Changed May 13, 2011 07:02PM UTC by kswedberg comment:11

@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.

Side navigation