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
- Speed test
- Draggable Demo
- CSS Transitions/Animations vs. GSAP Cage Match
- jQuery vs. GSAP Cage Match
- Why GSAP? A practical guide for developers
UPDATE: Apple reached out to us and acknowledged the apparent bug and said they're working on a fix. (Thanks Apple)


























29 Comments
-
Elliot Geno12:11 PM September 20th 2013
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!
-
Zwick12:56 PM September 20th 2013
I'm just curious when Apple will write down "Thoughts on HTML5".-
Michael Anthony05:01 PM September 20th 2013
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.
-
kris06:05 PM September 20th 2013
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..-
Daniel12:06 PM September 21st 2013
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.
-
honest06:07 PM September 21st 2013
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.-
DS06:23 AM September 23rd 2013
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 !?
-
Patrick Mullady10:00 PM September 23rd 2013
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"
-
Thomas Rosefalk05:57 AM September 24th 2013
@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.
-
Daniel12:13 PM September 24th 2013
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".
-
Thomas Rosefalk12:12 AM September 25th 2013
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.-
Thomas Rosefalk12:19 AM September 25th 2013
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 :)
-
Jack12:19 AM September 25th 2013
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.-
Chris S04:16 PM September 25th 2013
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?
-
Jack08:16 PM September 25th 2013
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.-
Chris S07:35 AM September 26th 2013
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.-
Jonathan08:00 AM September 26th 2013
@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!
-
Chris S01:56 PM September 26th 2013
@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.
-
Antoine Quint12:04 AM September 27th 2013
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!-
Simon Dell05:08 AM October 1st 2013
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.-
NickH07:13 AM October 4th 2013
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.-
AdamCake08:43 AM October 15th 2013
I can confirm this. I've got some canvas games which run perfectly fine on a lot of devices, including iphone 4 and 5 running iOS6. the exact same game running on an iPhone with iOS7 has a painfully slow frame rate. It would be nice to get some feedback on this, maybe even a potential solution! :)-
Byron09:56 AM October 15th 2013
I think I have found a lead on this -I am working on a Sencha Touch App - and a bug showed up where a particular menu was being closed whenever a css property was being added to an un affiliated button - a container and the menu were linked via a "painted" event which in Sencha Touch is tied to the DOM painted events ... the painted event on the container closes the menu. The bug showed up with the iOS7 update, and after much banging of heads we found that a css change on some unaffiliated button was firing the painted event on that particular container ... and god knows what else, which was in turn closing the menu prematurely.
So yeah - seems like iOS7 mobile safari is paint happy, or a happy painter, either way I think this may play into the performance issues seen here.
-
Sander Kessels04:06 PM October 16th 2013
Oh, irony. I did some testing and what I was suspecting was true....Your speedtests with the actionscript version of GSAP (http://www.greensock.com/tweening-speed-test/) actually are FASTER compared with HTML5 on the iPad if you check them with the flash compatible Puffin Browser...
In other words... animations made with Flash are rendered FASTER on the iPad through a cloud based browser compared with HTML5 animations on the Safari browser on the iPad.
To be honest, I tested on an iPad 1 (so no IOS 7), but that should be the testing device devs should use, right?
FLASH with Puffin browser: 300 instances : 60 fps
1000 instances: 59 fps
HTML5 on Safari: 300 instances: 17 fps
1000 dots: 3 fps.
Okay, the displayed numbers with Puffin might not be correct (it's cloud based, afterall), but these animations do appear to be way more smooth...
-
Barny11:59 AM October 27th 2013
Safari on ios7 can be slow and unresponsive due to the ios7 update duplicating entries in the favorites folder (like 5000 duplicates). Delete duplicate entries on main computer synced with iOS device through iCloud. Allow iOS device time to sync and Safari was back to normal-
kyle10:49 AM November 11th 2013
Honestly apple needs to re-focus their hardware because there are more and more improvements made by other companies faster and issues such as Greensock has pointed out are fixed through open source developers. apples constant monopolizing over their products may streamline profit to them but it makes fixes slower to resolve and creates reliability issues in the eye of the consumer. Apple may have started the whole web apps thing and may say they are focused on optimizing hard ware for web but keep falling short or breaking even. I predict apple will slowly decline in the personal mobile device department and as a hardware company. Just pass the ball to the open source developers out who will push the limits of mobile devises and apple can focus directly on hardware like they say they are. last generation tech is not what the public want, they want variety and free stuff, third party support would be a start.if you read all this, kudos
-
Karen10:00 PM December 1st 2013
I am following several discussions on this topic since I am having the same issues.Read through some of the forums on the Apple website under community support discussions. Especially
"Ios7 problems, safari crashes" and "iPAD Air low memory crashes"
MANY USERS having multiple issues with crashes at specific web sites...problems with scrolling crashes...large PDF files...graphic intensive sites with maps, embedded videos and pinch zoom.
MANY UNHAPPY USERS!
-
Andrew09:21 AM January 18th 2014
On whether Apple would intentionally make things slower I agree that this is probably not the case. It may be that THEIR optimization targets are lower than we would like.However I do think there is an understanding by Apple that iOS apps need to be more feature rich and work better than mobile web apps. If this is not the case, can someone please explain why WEBGL is enabled on their iAd framework but NOT in their browser or UIWebView?
This to me would seem a strategic decision.
-
Garavani12:58 PM April 3rd 2014
Same issue for me with Safari 7 on iMac. Brillant smooth performance with css transitions on Safari 6. Miserable ones now with Safari 7 :-(