Jump to content
Search Community

Mobile Safari performance

sigmundsquirrel test
Moderator Tag

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

I just built a site that heavily uses GSAP for the animation. Thanks for a great framework! I transitioned seamlessly (almost) from Actionscript. It went live today at http://www.skidmore.edu/mind/


The client is complaining that it is very slow (they actually said "very, very slow") on Mobile Safari on iPad, but worked well on Mobile Chrome, so it doesn't seem to be just the processor. Do you know of any Mobile Safari-specific animation issues to look for?


A couple of things I'm thinking. A few functions were written by another developer and he used jQuery animate() extensively. I've got the jquery.gsap plugin to handle it, but am I taking a speed hit by translating. Is it worth recoding into GSAP?


Also I'm using jquery.gsap.js 0.1.5 and TweenMax.js 1.8.2 (as well as jquery.js 1.8.3) I began with jquery 1.9 but there were some issues on IE because of their major rewrite, so we backtracked to 1.8.3. Is that a speed issue?


I'm just throwing all this stuff out there and hoping someone will have a suggestion of a) potential things to look for, or B) potential solutions. I've read that opacity is a problem on iOS, but the Mobile Chrome seems to be doing well, so it isn't a pure iOS problem...


Thanks again for a great product. This was my first non-Flash animated site and I couldn't have done it without the familiarity and comfort of greensock!

Link to comment
Share on other sites

First, the site is really nice running on my laptop. Congrats.


And yeah, it was definitely a bit un-responsive on the iPhone 4S in Chrome and Safari.

I would start by looking into the full screen opacity fades that are happening when you transition from section to section. They are known to be cumbersome, but they shouldn't totally mangle your site.


Also, Safari on iOS has had a number of issues that we have accounted for in a few releases.

GSAP is now on version 1.9.2. I would strongly recommend updating and testing to see if things are better. Safari had some issues where under certain circumstances it would kill the requestAnimationFrame events. We have work-arounds in place for that. 


The opening animation runs very nicely but its hard to get past that. 


In general I found the brain to be very unresponsive (on iphone). It didn't seem to want to respond to touch events other than displaying the tooltips. Had trouble getting into various sections. in some cases if i clicked on a brain element and then did a pinch-zoom I would instantly get kicked into the appropriate site section.



We've seen a variety of far more complex animations running on iOS, so I'm not really sure what is at play here. 

  • Like 1
Link to comment
Share on other sites

To my knowledge mobile safari does a great job translating touch to click events, otherwise 100% of the web created before iPhones/iPads would have had broken events.


What I suspect Carl has noticed is that mobile safari interrupts the first 'click' on an element to emulate css :hover events when the element clicked has a :hover rule that changes the display or visibility of a child element - this is a usability allowance for all those sites using css hover based site navigation. You actually need to touch the element a second time to activate the click listener. Since there is no real 'hover' concept on iPads, you might want to adjust the way those tooltips are shown on mobile devices.


What version/s of iPad/iOS are you testing with? The older stuff is comparatively very weak, so full screen opacity fades and loads of images are destined to cause performance issues.


You might find you'll need to conditionally setup your css and tweens for desktop vs mobile devices. You might want to avoid opacity tweens entirely (set durations of opacity tweens to 0 maybe), and you could also see an improvement by removing as many background-images as you can afford, and just using solid colors instead.

  • Like 3
Link to comment
Share on other sites

Thanks, Jamie. That's exactly the kind of suggestion I need. This is my first HTML site for mobile, so I'm pretty green. (Actually, it was web first, and now we're addressing the mobile scenario.) I'm sure I've broken many best practices... ;-)


The client has reported the performance problems on iOS 6.1.3 (just updated last week) for Safari. But they also report that it "runs beautifully" on their Chrome for iPad on the same device, so it really seems like there is something browser-specific going on (aside from the general improvements I will make for performance). I'm hoping GSAP 1.9.2 and the requestAnimationFrame events might help.


A question: I've seen so many different "solutions" for the hover state on mobile Safari. Do you have a suggestion for the tooltips behavior?



Link to comment
Share on other sites

Hi, I tested this site as well on iPad (gen4).

On safari I had troubles getting past the tooltips and it lagged heavily when I managed. Like in section Awareness the video just didn't pop, but I did see the planets coming up in a very stuttering way. From there I was kinda stuck, the brain didn't open and it was even harder to get to another section.

On Chrome the animations played almost as smooth as on desktop, only the click as described above was the same. It was hard to get past the tooltips. But apart from the clicks, I could actually use the site, while in safari you just have the impression nothing works.

In other words: A huge difference and I'm intrigued as well how there can be such a performance difference between two browsers on the same OS...and even the native one failing badly...

  • Like 1
Link to comment
Share on other sites

Seems like I have two separate issues: the performance of the animation (which is poor only on the Safari for iPad but not on Chrome) and the :hover mouseover behavior on the main brain navigation (which requires a global fix).


I'm going to be trying a few things today—updating to GSAP 1.9.2 among them (for the requestAnimationFrame events). I'll let you know how it turns out. If anyone has a suggestion for the brain lobe tooltips, I'm open. I've got some things I'll try, but it seems there is a divergence of opinion online on how to do this for mobile.



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.
  • Create New...