Reel blinking in Firefox

[lifeinlightspeed]

I've been testing reel for various 360 reels and set up a bunch of them in the past month for a project.

They were all working wonderfully but sometime in the past couple weeks they started blinking in Firefox once the reel loads and the spins begin (I'm running FF v.21). This same problem isn't persisting in IE or Chrome.

Example: http://s3.amazonaws.com/LLShop/reel/SABRINA-S-B-BIG.html

Any assistance would be appreciated - thank you...!

[pisi]

Have crappy connection at the moment, but from a brief look, I would say the images are far too big for Firefox to render them in time. Hence the blinking. I can not even load them all.. Will do some measurements once my connection is back in shape.

[lifeinlightspeed]

Hello!

Just following up on this. We've had this problem only in Firefox but no other browsers, so it seems like it must be specifically related to how Firefox is loading either (or both) the script and images vs. Chrome, IE, etc.

Today I added a 6 second delay to see if it would help give more time for the images to load, but it still flickers: http://s3.amazonaws.com/LLShop/reel/CLASSIC-O-O-BIG.html

I realize that one is large. Here is a much smaller version of the same reel, each file is about 1/10th of the size. The flicker still occurs:

http://s3.amazonaws.com/LLShop/reel/CLASSIC-O-O.html

I absolutely love this script. Any help would be appreciated, thanks!

[lifeinlightspeed]

I'm still at a loss on this - any help would be appreciated ~ thanks!

[pisi]

Just a short one (no time :( ) I toy with it for a while now and I still have no clear idea what might be causing this, but I noticed few things:

• When looking on the network tab in Firebug, I see there a LOT of repeated requests, which pop out during the animation. Many of which time out, which is fairly natural considering the pace the images actually change (only memory cache is able to keep up with the demand).
• You load resources from //s3.amazon..., so the URLs are protocol-less. If I am not mistaken local cache is disabled for secure connections and since this URL can be used in both secure and insecure environment, it as a result doesn't appear to be cached at all. Use http://s3.amazon... to give cache a chance.
• Also in my Firefox on about:config page I had both cache control options (browser.cache.disk.enable and browser.cache.memory.enable disabled (supposedly I user choice, but I don't remember setting it so..). When enabled, both the flicker and the repetitive requests stop. I guess this might somehow be related with Firebug (?).

[lifeinlightspeed]

Thanks!

Thanks Petr,

I just did some testing to see if changing any of the above would help.

1. Repeated Requests - I'm not sure how I can respond to this to test and see if there's a workaround, or if its a cause. It only happens in Firefox as far as I can tell, so it's something unique to how the browser is rendering this stuff.

2. //s3.amazon.com resource loading - I added http:// to these URLs but it doesn't seem to have any affect. I'm still seeing the flickers.

http://s3.amazonaws.com/LLShop/reel/CLASSIC-O-O-BIG.html
http://s3.amazonaws.com/LLShop/reel/CLASSIC-O-O.html

3. I'm using Firebug too and I regularly flush out my Disk/RAM Cache using a Firefox Extension called Cache Status. Both of the cache control options (browser.cache.disk.enable and browser.cache.memory.enable) were enabled for me.

Still seeing flickers. :(

[pisi]

From what I can tell Firefox renderer simply can not keep up with the tempo and partial aborts with added queueing is the result. When I for example let it run and flicker for a while, I wasn't then even able to log anything into console unless I stopped the Reel animation. Even though the renderer was still clearly heavily queued, the stop happened instantly leading me to believe, that it is not Javascript choking and queueing, but the renderer itself. Which is a good thing I think.

You see, your BIG images really are far too huge for poor Firefox's slice of CPU power to draw them in time. So let's try to employ the GPU instead. I patched the code to enable hardware acceleration on the image in Firefox and so far it looks good even with //s3.ama... without the http:. Must say I can not get the smaller image to flicker, but the big one flickered reliably and this made it to stop.

Please try using this jquery.reel.js to see if it helps. Fingers crossed.

[lifeinlightspeed]

Thank you Petr,

I've changed the reel to the one in your link above on the following two examples (linked again here to make it easy).

http://s3.amazonaws.com/LLShop/reel/CLASSIC-O-O-BIG.html
http://s3.amazonaws.com/LLShop/reel/CLASSIC-O-O.html

Sadly, it seems to have helped the smaller version a little but hasn't gotten rid of the flickering.

[lifeinlightspeed]

P.S. - I'm reloading it a bunch right now and it ONLY seems to be doing the flickering on the first spin. After that it's working perfectly. After that, it's loading fine.

Also, using this script version seems to make the script working entirely in IE and Chrome for me.

[lifeinlightspeed]

Just following up on this issue. Thanks!

[kzurawel]

Same here, our reels are not nearly as large as @lifeinlightspeed is using but we still get the flicker in Firefox as well.

[pisi]

Sadly, this issue seems to be a combination of several different factors, which makes it hard to spot a common ground. @kzurawel Can you show me your Reel(s)?

[kzurawel]

@pisi Sure, here is one of them:

http://www.nissancommercialvehicles.com/nv-cargo/gallery

It only seems to have flickering issues in Firefox (both Mac and Windows).

[pisi]

Since the hardware acceleration had some positive outcome, I guess there's no harm in merging that into the development branch and into the next release.

Sadly, I still have no clear clue about the blinking :/