IOS 6 Bug, Sync issues with looping

[ghost]

After several loops, the sentence that is animating will not animate the letters one after another. Sometimes it tends to animate the first 3 letters together synced, then the remaining letters together synced. Maybe some issue with IOS animations?

[jschr]

Hmm potentially, I tried the demo page on my iPhone and didn't see the issue. Are you experiencing the problem on the demo page or your own?

[ghost]

It was my own. I did something like this:

$('#text').textillate({
  'loop': true,
  'minDisplayTime': 1000,
  'in': { effect: 'flip'},
  'out': { effect: 'nil', sync: true }
});

Every now and then, the looping will go wonky and semi-synchronous where all the letters will flip together. I noticed it more if i open a new safari tab in IOS, then navigated back to my demo page.

[jschr]

I can reproduce it even in chrome when I leave the tab for a while and come back. I'm not sure what the root cause of this would be. My guess is there's probable some optimization to not process timeouts/animations when the tab isn't active. It looks like it cues up all the timeouts and renders them all at the same time. For me, it works itself out on the next loop, are you seeing the same thing?

[ghost]

Yes something similar. I coded up a simple example without your library just using setInterval and jquery animate on each letter. Saw the same issue with it freaking out after coming back from a tab.

[jschr]

I think using some combination of requestAnimationFrame and setTimeout could solve it.

http://stackoverflow.com/a/7007776

Will try to run some tests this weekend.

[ghost]

Great find!