CODEWITHSUNDEEP
jquerycsssliderjquery-animate
Greg
Greg

Reputation: 567

Simple jquery Animation either doesn't work or flickers in Firefox only

I posted somethign relating to this a few days ago...but I still havent't resolved it. You can see it here at http://www.doublezerofilms.com and I have a jsfiddle here: http://jsfiddle.net/kz29p/ This simple slider works in everythign but Firefox. I'm wondering if anyone knows if there is a know n issue or workaround. Or...for you jquery masters, if I have a conflicting script that FF doesn't like. Any help is greatly appreciated. Thanks!

Upvotes: 0

Views: 274

Answers (2)

jfriend00
jfriend00

Reputation: 707298

Since about a year+ ago, Flash/Firefox added an optimization that tries to not load flash items that are not visible. And, then only when they become visible, is the flash actually loaded. I suspect that's what is happening here is that your flash is not initially visible so it doesn't load. Then, while you are animating, it becomes visible and tries to load causing some display issues.

Also, your custom easing function doesn't work in the jsFiddle. If I remove the custom easing function in the jsFiddle and change the initial position of the video so it's just slightly visible at the beginning, then it seems to work. It still has a bit of a blink (goes away, then shows again) at the end of the animation in Firefox and I have no idea what causes that.

Here, you can see the results after removing the custom easing and making it just slightly initially visible by changing the initial right position: http://jsfiddle.net/jfriend00/D85bR/

I also think you are susceptible to an issue if you start animating before the iframe and embedded flash object have completed loading. I know you're doing a 1 second delay now before animating, but that is probably not sufficient in all cases. I don't know how to detect when both the iframe and the embedded flash object on another domain are finished loading.

EDIT:

If I remove the height and width from your animation so it is just animating the right value, then the flash goes away. I'm not sure why you were animating the height and width anyway since they are preset to the correct size in your CSS.

You can see it work in Firefox without the flash here: http://jsfiddle.net/jfriend00/pJKLL/

Upvotes: 1

Headshota
Headshota

Reputation: 21449

It's probably the easing function that's causing the problem, removing the easing property solved the problem for me in Firefox.

Upvotes: 0

Related Questions