Hybrid View

    You found a bug! We've classified it as ANIM-1050 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Nov 2013
    Posts
    2
    Vote Rating
    0
    jhartikainen is on a distinguished road

      0  

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

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


    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.
    Attached Files

  2. #2
    Sencha - Services Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,348
    Vote Rating
    32
    arthurakay is a jewel in the rough arthurakay is a jewel in the rough arthurakay is a jewel in the rough

      0  

    Default


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

  3. #3
    Sencha - Architect Dev Team
    Join Date
    Apr 2012
    Posts
    224
    Vote Rating
    21
    miro.bojic will become famous soon enough miro.bojic will become famous soon enough

      0  

    Default


    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.





  4. #4
    Sencha User
    Join Date
    Nov 2013
    Posts
    2
    Vote Rating
    0
    jhartikainen is on a distinguished road

      0  

    Default


    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.

Thread Participants: 2