Jump to content
GreenSock

Kurrent Kurt

Site Test: Safari on iPad2 not working, Safari on iPad1 working

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi. I have recently begun redesigning my website at http://www.kurrent.com from Flash to HTML5. I am using the JS GSAP v1.9.7. 

 

My beta site is at http://www.kurrent.com/htmlsite. I tested on Firefox and Safari on the Mac with good results. It also runs fine in Safari on the iPad1, but it doesn't work in the Safari browser on iPad2. The page loads and the rectangles resize, but that's it.

 

I've looked through the forums and am still scratching my head at this one. 

 

Thanks in advance for the help!

 

Kurt

 

 

Link to comment
Share on other sites

First off, nice site. Love the animation. Very slick.

 

I really don't know what the problem is but I have 2 things to offer.

 

1) I saw a console error stating that you were trying to tween an invalid property, specifically autolpha (note the mispelling) as shown in this line of code:

tlTransInServices.to([keyboard, mouse, pencil, mug, coffee, coffeeSpotLeft, coffeeSpotRight, descriptionServices], 0, {autolpha:1}, "start")

2) I recently happened upon these tweets reporting bugs in how click events are handled in recent versions of iOS Safari

 

https://twitter.com/rem/status/342257588513165312

https://twitter.com/rem/status/342258193986113536

 

Perhaps you can try removing the meta tags as the solution tweet suggests. 

 

I noticed on my iPhone 4S that clicking on the buttons was very difficult. Often nothing would happen but at other times the colored boxes would grow.

 

It seems very likely that there is a bug in that particular browser, as the code works everywhere else. I even took a quick look in IE8, sure there were some layout issues (as I imagine that isn't a target browser for you) but the animation actually worked pretty well. 

 

Again, I'm kind of grasping at straws here, but it would probably be good to rule out those 2 issues, before digging deeper.

 

I would certainly recommend putting in some debugging functions to make sure the clicks are firing and the proper functions are being called.

 

Let us know if it helps

  • Like 1
Link to comment
Share on other sites

Hi. So I found the issue!

 

I had the following line, which surprisingly worked...notice the extra zero I had as the 2nd parameter.

tlTransAbout.set(mapVermont, 0, {top:"-190px", left:"90px", alpha:0, scale:.01}, 0)

And once I removed it (and updated 3 similar lines of code) it worked!

tlTransAbout.set(mapVermont, {top:"-190px", left:"90px", alpha:0, scale:.01}, 0)

Okay, so I am used to the Flash compiler. I hope this helps other developers who might have some syntax errors.

 

I updated the site some more and will be fine-tuning the animation performance.

 

Thank you so much for your help!

 

Kurt

  • Like 1
Link to comment
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.
×