Dropped frames (no display) while animating opacity of a DIV in jQuery
I'm developing a photo gallery web app, called Turtle skin (jAlbum). The cross fades between images work in all browsers, except FireFox (currently using FF7, but not sure it was working before). It seems FireFox hides the animated layer for some 200ms at the end of the animation, which makes the gallery look crippled. Meanwhile all the css properties are reported as expected: display=block, visibility=visible, opacity=1. The behavior is not consistent, though it happens most of the time. See the example album and move back and forth. You'll possibly see the disappearing images.
All Replies (3)
Some more info: It seems the rendering engine collapses at the final step when the opacity goes from 0.999 to 1.0. If there are no other animations on the same element there's no problem. In the above example I run 5 animations parallel (left, top, width, height, opacity) stopping at the exact same time. If I stop the position and dimension animations well ahead of the dreaded opacity: 0.99->1.0 transition, everything goes fine.
A good place to ask questions and advice about web development is at the mozillaZine Web Development/Standards Evangelism forum.
The helpers at that forum are more knowledgeable about web development issues.
You need to register at the mozillaZine forum site in order to post at that forum.
I consider this problem is about browser development and not web development. I just wanted to help the mozilla team. In the meantime I could circumvent the problem by stopping all other animations before the transparency change 0.99 -> 1.0 takes place.
Thanks, Laza