Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

iOS 7 Safari Performance: A Step Backward?


| GreenSock
33473

Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details.

With the release of iOS 7, I was anticipating some big leaps forward in browser performance. What I found was quite surprising. Is anyone else experiencing the same thing? Here's a quick [and very casual] video showing what I discovered: A lot of people in the industry talk about the benefits of using CSS transitions because they're so much faster, especially with transforms (scale/translate/rotate) on mobile devices. What happened? Why is Zepto (which uses CSS transitions) so much slower? GSAP's performance remains solid in iOS 7 (far better than jQuery and other libraries), but CSS transitions fall flat on their face (at least with transforms). Can anyone shed some light on what's happening? Are you seeing the same results in iOS 7? Also, is anyone else seeing worse performance when altering the scrollTop or scrollLeft of DOM elements? Useful links

UPDATE: Apple reached out to us and acknowledged the apparent bug and said they're working on a fix. (Thanks Apple)

Get an all-access pass to premium plugins, offers, and more!

Join the Club



User Feedback

Recommended Comments



Simple. Apple is degrading Web performance among other bull**** (enabling WebGL only for iAds, no full screen support, limited APIs, glaring 'bugs') all to promote native app development via the App Store. It's the same politics at work in the Steve Jobs missive about Flash!
Link to comment
Share on other sites

I'm totally in agreement with the commenters above -- Apple seems like they are degrading the web experience. I'm particularly upset with the way Safari only goes full screen in you physically scroll. It seems like they're saying the web is only meant to be a long scrolling static page, not a dynamic app or game. That said, I use CSS Transitions and transforms in my own framework and I'm still able to get 250 simultaneous transitions happening at 60fps. It still isn't even bad at 500, but the framerate is a bit lower.
Link to comment
Share on other sites

Users will write story about, "how i switch to Android devices".okay maybe some.. Agree.. the same story, but flash was an evil;) now html is lol. Also some of features, nessesery to build web apps features are removed.. but why people still buy iphones and ipads? they are expensive.. same price for super android devices with quad core cpu and full gd display..
Link to comment
Share on other sites

Do you people really believe that Apple is out to degrade the web browsing experience in iOS? With all the involvement Apple has in forwarding web standards and the fact that they pretty much invented performant mobile browsing in the first place, I find that an odd conspiracy theory. When I run the Futuremark HTML / javascript / canvas benchmark on my mobile device: http://peacekeeper.futuremark.com, the top rankings are dominated by iOS devices. The top 3 device / OS combinations and 5 of the top 10 are using iOS. I also note that for some reason the Galaxy S4 is running slower than the Galaxy S3 for this benchmark. Where's the conspiracy theory about Samsung degrading web performance on Android to pave the way towards Tizen? I'd be interested in hearing from the other commenters what scores they see on this particular benchmark for their mobile devices. I got an 885 for my iPhone 5 running iOS7 Safari. There have been countless examples of Apple releasing buggy updates to software that are crippled or slower in some aspect due to bugs (just look at the fiasco with 802.11ac support in their latest notebooks and OS X that was finally patched after a few months). I think it's FAR more likely that they have bugs in iOS7 Safari that will need to be fixed, and once they are fixed, I suspect performance will again be equal to or better than previous versions.
Link to comment
Share on other sites

Cmon, they block everything what is threat for appsstore paid apps and games. Webgl gave possibilities to make good browser based FREE games, so the FREE is the reason why we wont saw it on ios safari.
Link to comment
Share on other sites

I hope this will only be temporarily. We have a Webapp which is crashing in iOS 7 but runs fine in iOS 4 - 6. In iOS 7 the App runs out of memory when CSS Transforms move elements over big distances which leads to crashing the whole app. I mean this application ran fine on iOS 4 on an iPad 1. Now its crashing an iPad 4 with iOS 7 !?
Link to comment
Share on other sites

In my opinion it's in Apple's financial interest to keep the App Store technologically superior to any other online/offline experience. Why would you install an app if you could get the same experience from a web app? I always felt that mobile apps and the app store would be temporary until browsers caught up. I'm also seeing a trend with desktop apps becoming browser based. Like this 3D platform http://home.lagoa.com/ I was amazed when I saw what this web app was capable of. Impressive. Our 3D Max team is blown away by this site. "Imagine no more app stores? It's easy if you try"
Link to comment
Share on other sites

@Patrick also check out www.tinkercad.com, recently bought by autodesk. I hope the web app degradation is not a trend. It may just be a bug in the software. We've just developed an ipad application that uses the scrollTo plugin extensively for a slider component and can say that performance is unchanged.
Link to comment
Share on other sites

Seriously guys, the conspiracy theory stuff is ridiculous and not supported by facts. I realize that it "sounds" like a good argument that Apple has some vested interest in not having browser-based competition, but only to the uninformed. 1) As stated in my earlier comment - iOS Safari consistently posts the best benchmarks for HTML / CSS / Javascript performance in mobile browsers (bugs like Greensock points out here excluded). Apple pioneered full web browsing on mobile, and the iPhone was originally designed to ONLY run web apps and only released an App Store SDK in their second version of the iPhone due to developer demand. 2) Apple makes money selling hardware. iTunes and the App Store provide a microscopic portion of Apple's revenue and an even smaller part of their profit (they claim they only break even running the App Store and iTunes). It's in Apple's BEST interest to make the best hardware available for web browsing and to maintain their lead as the best platform for mobile web apps. It's more valuable for Apple to be the only mobile hardware that can run the hottest new web apps, then to get a small, barely profitable cut of the sales of native apps that probably run on other mobile platforms anyway. 3) Neither Android's stock browser, nor Chrome for Android run WebGL. Why aren't you guys ringing the alarm about Google trying to degrade web apps? http://caniuse.com/webgl 4) Other than the bug Greensock points out above (which is clearly a BUG), every new version of iOS and every new piece of iPhone / iPad hardware adds MORE compatibility for HTML5 features and INCREASES performance in the browser. In the case of iOS7 on the iPhone 5s, the performance has DOUBLED over the previous generation. So how on earth can anyone rationally claim "degradation" of web apps in iOS? Reminder: "degrade" means "to make worse", not "to not yet implement a feature I really want".
Link to comment
Share on other sites

Greensock; Is the demo fully hardware accelerated? I remember something changed in the earlier iOS versions where translate3d was fine. Now we have to use preserve-3d and backface-visibility to get good performance from tweens.
Link to comment
Share on other sites

Gah can't edit, sorry. @Daniel 2) I don't believe this is true, not before I see the numbers. 3) I can run tinkercad on my galaxy note 8 with stock android browser. AFAIK, it uses webGL. 4) our tests show that the performance is at least the same on an iPad 4 going from iOS6 to iOS7. We've had no change in performance at all. Just because you've had different results it doesn't mean it's the defacto standard for everyone :)
Link to comment
Share on other sites

No, we didn't specifically hardware-accelerate GSAP in the demo speed test. We certainly could have set force3D:true, but the goal was to be very fair and do an apples-to-apples comparison (as much as possible at least). Doing translate3d() can actually negatively impact performance in certain situations, like when you're doing a TON of elements/layers. And if I remember correctly, backface-visibility can hurt performance as well (again, it's not a blanket rule). Thanks for asking.
Link to comment
Share on other sites

We actually had an issue here with ios7 on the iPhone (5) after the update. Some transparent PNGs being moved around with GSAP TweenMax are rendering what I can only describe as just the 'alpha layer' in the browser. All the color data is stripped out and the object remains is just a semi-transparent black. What is odd is that the page contains multiple iterations of the same image and some of them are rendering normal, while others are not. Each time it is random. We were able to confirm this across two iPhones running iOS 7. The iPad appears to be unphased by the update and still runs great with the GSAP we're using. Is there any documentation about this sort of bug or has anybody had this problem before? Also is it possible this is a GSAP issue with iOS 7?
Link to comment
Share on other sites

I can't imagine how that could possibly be a GSAP "bug" because at its core, all GSAP does is set css properties over time. No voodoo magic. It isn't like if you set those through some other means (your own JS), the problem would disappear (please correct me if I'm wrong in this case). Those rendering issues certainly sound like browser bugs. I haven't seen anything like that, nor has anyone else reported something similar.
Link to comment
Share on other sites

I think you're right Jack in that this is a browser issue and not a GSAP issue. If I can get a solution I'll follow up.
Link to comment
Share on other sites

@Daniel .. regarding Google trying to degrade web apps, I will have to disagree. Google is actually getting rid of web-kit and implementing their own rendering engine due to all the limitations and bugs in web-kit, which are vast. The majority of render bugs I have to fix on a daily basis are webkit rendering bugs.. which in my opinion is getting as bad as IE. Even Firefox that uses Gecko, which has way less bugs than webkit, is going to eventually switch to Google's new rendering engine. So like Jack said, I don't see it being a GSAP bug, but rather some kind of webkit bug!
Link to comment
Share on other sites

@Jonathan, Yep I understand what you mean with the Webkit bugs. I too feel as if almost all my odd quirks come from webkit related issues. I think on the last project more time was dedicated to that than IE. To respond to my earlier post, the issue was the iOS 7 iPhone PNGs was difficult. Another effect I noticed was when a PNG would leave the screen it lost the transparency capabilities on any pixels that contained color data. Sort of like a PNG8. Unfortunately I didn't quite figure out what was causing the issue but I did find a fix. Setting each of the PNGs to be run through the GPU using "-webkit-transform:translate3d(0,0,0)" did the trick.
Link to comment
Share on other sites

Is there an online test case that would demonstrate this performance regression? The best way for us (Apple's WebKit team) to fix these issues is to raise a bug on http://bugs.webkit.org or http://bugreporter.apple.com with a test case and clear steps to reproduce this issue and then we can analyze and fix the problem. Thanks for your help!
Link to comment
Share on other sites

Here's a "me too" message: I'm seeing PNG problems in iOS7 that aren't present in 6. The problems I see are similar to the ones posted above. Although I'm sad about the bug, I'm glad to see people describing similar problems in a sensible way. I can't post a link as the site isn't live yet.
Link to comment
Share on other sites

I do a lot of HTML5 canvas development and I've noticed canvas performance degrade quite a bit after upgrading my iPhone5 to IOS7. Hopefully it's just a bug that Apple failed to catch and not a sign of things to come.
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

×