Animation with many elements jumps mid-animation to 100% on iOS when scrolling page

[jhartikainen]

I was investigating your tool for building complex animations to run on a variety of platforms.

I ran into the following issue:

When I have a more complex animation with many elements and longer delays, when the user scrolls the page on iOS after the animation has started, some of the elements of the animation suddenly jump to the final state of their animation.

Steps:
- Build animation with a lot of items (I have attached an example project you can use to compare)
- Open page on iOS 5, 6 or 7 (issue does not seem to exist on iOS 4)
- Wait for animation to start. Try scrolling the page up and down when animation is in progress

Result:
- Currently active animation pauses
- When scrolling stops, active animation continues, but elements which are inactive jump to their last frame

Expected:
- Inactive elements do not jump to the last frame

In the attached file built with Sencha Animator, if you open it on an iPhone with one of the affected iOS versions, then scroll around while the first elements begin appearing, you'll notice how some boxes suddenly jump to the screen. This should not happen.

[arthurakay]

Thanks for the report! I have opened a bug in our bug tracker.

[miro.bojic]

Hi jhartikainen,

It seems that this is the artefact of how iOS webkit is set up to handle animations. When scrolling, animations are paused (I am guessing that this is to create more smooth scrolling within the browser). After scrolling is over, iOS will resume the animation timers, but it seems that sometimes (as you discovered in cases when there are a lot of individual keyframe animations) the timers will become desynchronised - this is definitely an iOS webkit bug.

While this issue seems to go unnoticed (there aren't many complex CSS animations on scrollable pages on the net), there are sporadic reports, and people are reporting some workarounds, but most involve moderate scripting with JS - there is no CSS only workaround it seems.

[jhartikainen]

Yeah, this is pretty much the same as we discovered. It seems there is no 100% reliable way to set up CSS animation on webkit devices right now and using script based animation would be the only way.

[johneceartur]

I like your post. It was very amazing post. So i hope everybody likes it.