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

[Kurrent Kurt]

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

 

 

[Carl]

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

[Kurrent Kurt]

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