#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:2 Changed 12 years ago by
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 ;)
comment:4 Changed 12 years ago by
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 12 years ago by
Component: | unfiled → effects |
---|---|
Owner: | set to 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.
comment:6 Changed 12 years ago by
Status: | pending → new |
---|
here the reduced code example: http://jsfiddle.net/FesEG/
comment:7 Changed 12 years ago by
Priority: | low → high |
---|---|
Status: | new → open |
Confirmed. Reduced a little further: http://jsfiddle.net/FesEG/1/
comment:8 Changed 12 years ago by
Milestone: | 1.next → 1.6.2 |
---|
comment:9 Changed 12 years ago by
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.
comment:10 Changed 12 years ago by
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)
Reported to Mozilla - https://bugzilla.mozilla.org/show_bug.cgi?id=656948
comment:11 Changed 12 years ago by
@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.
[link to example-code removed, see jsfiddle-link below]