Taha

Tweens not working on IOS6?

Recommended Posts

Hey Everyone,

I'm not sure if anyone else has run into this yet, but I developed a game using JS Tweenlite for a Safari browser for an iOS device. After I upgraded my iOS from 5 to 6, the Tweenlite doesn't seem to run, neither Safari on iOS 6 or Chrome on iOS6, everything works just fine on both browsers on a device running iOS5.

 

Hoping to find a solution from you guys.

 

Thanks much!

Share this post


Link to post
Share on other sites

Could you post a sample basic HTML page that clearly demonstrates the issues? And are you using the latest version of the JavaScript files?

Share this post


Link to post
Share on other sites

I think I found the problem, here's how I have my directory and game structured:

 

(Screen shot 1.jpg)

The first Image:

 

The game is under:

 

Project1/matchGame/index.php

 

Which includes path to the Tweenlite and the Plugins, if I run this file index.php under the matchGame directory, the game works fine and Tweenlite seems to work great!

 

 

 

(Screen shot 2.jpg)

In the root directory structure:

Project1/index.php

 

I have an iframe on line 228 which includes the Project1/matchGame/index.php. The root index.php is the complete website which has one portion showing the game.

Now when I try to run the Match Game in an iFrame on the root index.php, the Tweenlites doesnt seem to run, no errors though. The problem was because the root index.php was also importing TweenLite as on line 244, something was going wrong. If I remove the import from line 244 on the root index.php, The game inside the iFrame seems to work fine. But because my root index.php also has some animations so I need the Tweenlite library for that too.

 

The work around that I found was adding and removing the Tweenlite path from the root index.php through javascript. I don't know if iOS 6 has removed sandboxing around iframes or something else, but this was working fine up until iOS5.

 

Let me know if anyone else has similar issues with iFrames. Or if there is a way where I can separate the Tweenlite global object for each page so they don't overwrite each other, that would be great!

 

Thanks much!

post-10816-0-71826600-1348583526_thumb.jpg

post-10816-0-62506100-1348584170_thumb.jpg

Share this post


Link to post
Share on other sites

I have same problem. plase help

Would you mind posting a simple example HTML page (with any support files) that demonstrates the issue?

Share this post


Link to post
Share on other sites

After hours of troubleshooting, I confirmed that there's a bug in iOS 6 Safari that prevents redrawing of the screen for [up to] a few seconds on initial load of the page if you check the a computed style of any element and use a setTimeout() to begin the animation. VERY weird. And this has nothing to do with a bug in the animation platform. In fact, the tweening happens accurately even for the few seconds that it looks like the screen is stuck - the values are indeed getting updated but Safari just isn't redrawing the screen, so it looks like nothing is happening.

 

Here's the proof (try this in iOS Safari):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iOS Safari Bug</title>
</head>
<body onload="init()">

<p>Box's "top" property should animate smoothly down the screen beginning immediately. iOS 6 Safari, however, ignores redrawing the screen for a few seconds initially if we check a computed style right away and use a setTimeout() to start the animation. At least this is true as of 2012-09-30.</p>

<div id="box" style="position:absolute; background-color:#CC0000; width:200px; height:200px; top:100px;" ></div>

<script type="text/javascript">
  var box = document.getElementById("box"),
		cs = document.defaultView.getComputedStyle(box, ""),
		value = cs.getPropertyValue("top"), //remove this line and it'll work fine. Doesn't matter which property we check.
		y = 100;

  function init() {
	 setTimeout(begin, 1); //we must begin a little bit later to trigger the bug
  }

  function begin() {
	 setInterval(function() {
		box.style.top = y + "px";
		y++;
	 }, 10);
  }
  </script>

</body>
</html>

 

I also figured out a workaround which is to add a style tag dynamically to the document so that it forces Safari to "wake up" and redraw things appropriately. That workaround is implemented in the latest version of the JavaScript files.

 

Would you mind downloading a fresh copy and letting me know if it resolves things for you? http://www.greensock.com/v12/ (or if you're a Club GreenSock member, log into your GreenSock account at https://www.greensock.com/account/ and download it in the bonus zip)

Share this post


Link to post
Share on other sites

Hang on, I just discovered that the fix in iOS 6 broke something in the desktop browser in Windows, so I removed the fix temporarily. Let me look into this further and I'll post when I have a solution. Stand by...

Share this post


Link to post
Share on other sites

I have the same problem, all my work is broken on ios6, please tell me there is a fix for this otherwise I am screwed, from what I seen the tweens are not responding while there is a interval running, maybe I am wrong but this is what I noticed.

Share this post


Link to post
Share on other sites

I have just tested jquery animate and is working fine, I don't know if this helps :?

Share this post


Link to post
Share on other sites

Hey Everyone,

I'm not sure if anyone else has run into this yet, but I developed a game using JS Tweenlite for a Safari browser for an iOS device. After I upgraded my iOS from 5 to 6, the Tweenlite doesn't seem to run, neither Safari on iOS 6 or Chrome on iOS6, everything works just fine on both browsers on a device running iOS5.

 

Hoping to find a solution from you guys.

 

Thanks much!

 

Hi,

 

I had same problem with Tweenlite and IOS6 and this works for me.

 

TweenLite.ticker.useRAF(false);

Share this post


Link to post
Share on other sites

Yes, there are bugs in iOS Safari's handling of the requestAnimationFrame functionality that can cause refreshes to occur at a lower rate than they should (again, an Apple/iOS problem, not GSAP) so setting TweenLite.ticker.useRAF(false) for now on that platform is a good idea. Hopefully Apple will release a patch soon.

 

Oh, and please make sure you're using the latest version of the GSAP files.

Share this post


Link to post
Share on other sites
TweenLite.ticker.useRAF(false);

 

Wow!!! it's work....thanks :-P

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.