2

Can anyone explain why the provided canvas animation stutters? I've created a test stub which demonstrates the problem.

I see the stutter in FF, Chrome, IE on desktop and in FF and Chrome on Android.

Is the stutter due to garbage collection? It seems even raf generates a double on each call which eventually requires gc. If gc is the cause then html5 animation is pretty much doa. Sigh.

The same question was asked a year ago but because I'm a new member I'm not able to contact the author to find out his solution. HTML5 Canvas DrawImage Stutter / Choppiness . It is really too bad there is no way for a new user to get another user's attention, since the author of that other question may have the information I'm looking for, an simply hasn't posted it. I tried posting to his question in an effort to get his attention, but my post there was deleted as a rules violation(which is was). Guess I'm out of options. Chicken and egg problem with rep.

Community
  • 1
  • 1
user3356715
  • 181
  • 2
  • 12
  • I can't get your example to work, but try reducing deltaX (maybe == .05). – markE Mar 14 '14 at 20:46
  • I reposted example code. You should be able to copy it into a text file and load it into a browser. – user3356715 Mar 14 '14 at 21:01
  • I'm getting a small hitch in FF, but no hitch in IE or Chrome. I'm not able to test Apple. Does the hitch appear if you use CSS positioning to move an img element instead of Canvas? I'm upvoting your question so you have a bit more rep :) – markE Mar 14 '14 at 21:16
  • I see the problem in FF and Chrome on Win7 and Android. Try stretching the browser window to max on the x axis. I do not see it on Safari running on a 4 year old iTouch. Thanks for the rep. Are you able to get the author of that previous question to contact me, since I can't contact him? – user3356715 Mar 14 '14 at 21:35

1 Answers1

4

Ok, so after pulling my hair out for 1.5 days I think I have an answer. It appears browsers vsynch to a monitor, which I guess is the point of calling requestAnimationFrame. It appears the synch mechanism can get confused when running on a multi monitor system. I have three monitors. When I disconnect all but one monitor and restart the browser, the problem appears to go away. This kind of makes sense given that the problem manifests sporadically, ie I'm guessing when a given monitor gets out of synch with which ever monitor is providing vsynch to the browser.

Since I'm not certain about this I'm hoping others can confirm or shoot down my theory. I'll continue to (re)test with different monitor configurations, but it would be nice to get confirmation from another brain and set of eyes.

Edit 01: I'm not completely nuts. http://news.softpedia.com/news/Firefox-Nightly-Adds-Support-for-Vsync-for-Smooth-Animations-360245.shtml

Edit 02: Some chrome users/devs has discovered this or a related problem. Finally something might be done with this issue. See https://code.google.com/p/chromium/issues/detail?id=422000. BTW, IE11+ does not have this issue. Started using IE11 for baseline testing, since chrome is having QA issues lately.

Edit 03: Just ran across this q&a which is similar. Good info in the first answer. Chrome requestAnimationFrame issues

Community
  • 1
  • 1
user3356715
  • 181
  • 2
  • 12