788570 - Jerky simple animation in Firefox, but not in Safari, Chrome or IE

Status: RESOLVED INVALID

(Core :: General, defect)

Description

[Mike]

User Agent: Mozilla/5.0 (Windows NT 5.1; rv:15.0) Gecko/20100101 Firefox/15.0
Build ID: 20120824154833

Steps to reproduce:

View the following Web Test Page:

http://www.studioivphotography.com/PortfolioPanMagicThumb2.htm


Actual results:

The issue is repeatable. It is always not as smooth in Firefox as it is in other browsers, and ruins the presentation. 

The anomaly shows on different computers with different graphics cards, and I have experimented with my local browser settings to try to remedy the situation.

https://support.mozilla.org/en-US/questions/935951


Expected results:

Initial animation/scrolling should be smooth, not jerky.

Comment 1

[Loic]

Did it use to work in previous versions of Firefox?

Comment 2

[Mike]

(In reply to Loic from comment #1)
> Did it use to work in previous versions of Firefox?

I wouldn't know that, Its a new idea I'm testing to see if I can get it to work properly/smoothly.  My guess its a browser level bug and needs to be addressed by Mozilla.  May you/someone who runs different versions can test in older versions to try and ferret out the problem.

Thanks, Mike

Comment 3

[jerryj]

I also see that Firefox has horrible (jerky) canvas animations.  Here is a very small test animation that only scrolls an image (simple!), that jerks:

   http://www.duckware.com/test/chrome/jerky2.html

There is an added performance graph.  Gray line is difference from expected 1/60 callback rate.  Blue line is time (ms) spent in the animate() function.  What is interesting is that the animation callback is being called on time, and the animation callback runs in well under 0.5ms, but FF is unable to update the screen without 'jerks'.  This strongly suggests that the code that interacts with the GPU is having problems.

Comment 4

[jerryj]

I strongly suspect FF is messing up vsync.

Comment 5

[Timothy Nikkel (:tnikkel)]

My profile showed us spending the most time waiting for a synchronization primitive in EndTransaction. (Sorry didn't upload it).

Comment 6

[Loic]

The rendering is worse in Nightly (FF35).

Comment 7

[Benoit Girard (:BenWa)]

Attachment: Profile view.png

I just took a profile and things are sitting idle. Looks like the animation isn't triggered from requestAnimationFrame. The content panning should be animated from within a requestAnimationFrame callback if you want things to be smooth:

https://developer.mozilla.org/en/docs/Web/API/window.requestAnimationFrame

Here's how the next frame is scheduled:
setTimeout(function(){cObj.runit();}, 30 + (this.mq.addDelay || 0));

If you want a your animation to be smooth you should be using rAF, setTimeout doesn't line up with the rendering pipeline causing significant jitter.

Comment 8

[Timothy Nikkel (:tnikkel)]

Sorry, I was refering to the link in comment 3 (http://www.duckware.com/test/chrome/jerky2.html) not the url field of this bug. My mistake. The testcase from comment 3 does seem to be using rAF.

Comment 9

[Benoit Girard (:BenWa)]

Ahh opps, I just skimmed the bug. We don't know that what comment 3 is referring to is the original report. Please file a new bug unless we know that the underlying issue is the same (we only know the symptoms are the same) otherwise it just mixes up the investigation. It's in fact likely different issues given Comment 7.

I'm closing the original bug as INVALID because the animation isn't scheduled properly and profiling shows us handling all the events efficiently.

Comment 10

[jerryj]

OK, just filed Bug #1080869