Issues in ios6 when navigating to another animated page before the tween of previous page has finished

[noekidotcom]

Hi,

I'm having a problem with several animated pages on my site that make use of gsap TimelineLite tweens.

The thing is this issue can only be reproduced in my Ipad (I'm testing on an ipad mini with ios 6.1.3).

If I go to a page with a tween it is reproduced with no issues whatsoever, but whenever I navigate to another animated page without letting the previous tween finish, the animation on the destination page will not start unless I force a page refresh. No issues appear if I wait until the end of the animations before navigating to the next page.

 

I'm a complete newbie. Can you think o a fix for this?

 

Here's a super simple link to test:

 

http://www.serviciosmedia.eu/gsap/index.html

 

Thank you in advance!

[Carl]

Hi and welcome to the GreenSock forums.

 

Sorry to hear about the trouble.

Thank you so much for providing the example. Very helpful. 

 

I was able to replicate the problem on my iphone exactly how you described.

 

Can you please try this modified version of your files with your iPad?

 

http://greensock.com/temp/nextback/index.html

 

On my end, this version seems to be working fine.

 

The only significant change that I made was that I moved the 

script tags to the bottom of the body as opposed to being in the head.

 

Going in I had a few assumptions:

 

1) the onload event was not firing, thus play() was never called 

2) the onload was firing prior to the jquery loading and thus your jquery selectors weren't working

3) somehow the onload was firing after your scripts were loaded but before the DOM was accessible and thus the jquery selectors weren't valid

 

None of these reasons really make a ton of sense to me but the fact is that making sure the DOM was loaded and processed PRIOR to loading and executing any other javascript seems to have solved the issue.

 

I wasn't able to do extensive debugging, but moving the scripts around definitely seemed to fix it.

 

Let us know if my proposed fix works for you.

I've attached a zip of the html incase you or anyone else wants to test more

 

Note, I'm using TweenMax 1.10.1 but updating to that version alone did not solve the issue.

nextback.zip

[noekidotcom]

First of all, thanks so much for such a quick answer.

I tested the link you provide and it seems to work though with a slight frame jump in the first tween (heading).

I tried to do the same in my original project (this is, changing the placement of both jQuery and Tweenmax script tags to the bottom of the page just as you did). I was  using VERSION: beta 1.9.4 and it didn't seem to work, but changing the script to  VERSION: beta 1.10.1 definitely made the change...(I wonder why it did not help solve the issue when you tested the page).

 

I'll continue testing to make sure the results are not ramdomly buggy and I'll keep you all posted if I am able to get a pattern here.

 

Once again, thanks a lot!

[GreenSock]

I believe I've uncovered a scenario in which iOS 6 Safari drops requestAnimationFrame events when you switch away from a tab and then come back again (intermittent - it doesn't happen every time). Again, this is a bug in iOS, not GSAP. However, I've implemented a workaround in the attached preview of 1.10.2 - would you mind giving that a shot and letting us know if it resolves things for you? 

1.10.2_preview.zip