This month, Apple released the “new iPad”, its newest and latest tablet device, featuring a high resolution “Retina Display”, an updated CPU and GPU and more memory. A few weeks before the launch of the iPad, Apple also released iOS 5.1, a mostly maintenance release that included fixes for battery life among various others. 61% of devices are now upgraded to iOS 5.1.
Our HTML5 scorecard typically focuses on what HTML5 developers need to consider when developing for a platform or mobile operating system. Both the new iPad and iOS 5.1 are significant updates in the Apple ecosystem. In this HTML5 scorecard, we’ll look at them independently, explore a few of the issues we found and give developers some guidance on how to work both the new iPad and with iOS 5.1.
In a nutshell, the new iPad is a mixed bag. The new iPad’s display is incredibly fine grained and web site text now appears unbelievably sharp. On the other hand, the browser experience is noticeably slower with stutters and redraws on complex web pages and web apps. Images that haven’t been updated for retina displays now appear blurry in contrast to the sharp text. iOS 5.1 doesn’t offer many new features, and it does take a step backwards. For hybrid apps (web apps packaged in a native shell), iOS 5.1 breaks localStorage and WebSQL persistence, so developers can’t rely on them anymore.
### iOS 5.1
As has been widely reported by web developers, iOS 5.1 has changed the behavior of an embedded WebView. WebViews power HTML5 applications that live inside of native packages, such as PhoneGap or Sencha Touch native packaging. They provide an embedded web browser that is hosted within a native application, permitting the distribution of web apps to native app stores. WebViews are a feature of all modern mobile operating systems.
Prior to iOS 5.1, when an embedded WebView was used, data stored locally using HTML5 storage was kept persistent. Specifically, if your application used localStorage or WebSQL, it was considered part of the application’s data. When a new version of the app was installed or the app was hard-closed, the persistent data was kept around. The next time the app started, the localStorage would appear as if it had never gone away, exactly as what happens in Mobile Safari.
In iOS 5.1, this data is no longer considered persistent and is treated as temporary or transitory data, so iOS can destroy it at any time, without warning, including during low memory scenarios. This is probably because Apple can’t reliably iCloud backup, or iCloud sync from anything that’s not stored in the native CoreData storage. As such, they’re pushing developers to move to Apple native data systems to make apps iCloud-ready. Of course not everybody will want to do this. For developers who relied on localStorage or WebSQL as their mechanism to store data in their app, breaking this mechanism is a big deal. There are various workarounds, such as using the PhoneGap-SQLPlugin which uses the underlying SQLite, or writing your own JavaScript bridge to CoreData.
We also poked around iOS 5.1 to see if there were new HTML5 features like CSS regions or support for the File API or any other new web platform features. We used our favorite tool, haz.io which builds on the open source Modernizr detection library to see what’s new under the hood. In short: nothing. No new features showed up between iOS 5.0 and iOS 5.1. iOS still features some of the best HTML5 support on any mobile browser, but this latest incarnation hasn’t increased the depth of Mobile Safari’s support for the standards. We’re hoping to see CSS Regions come to iOS soon, as it’s supported in Safari 6. Mobile Safari reports “5.1” as its version number, so it’s likely only a matter of time until we get the ability to use the Regions feature. We were also looking to see if WebGL, which is currently only available for Apple iAds, is available in the public browser. haz.io reports that WebGL is supported in Mobile Safari, but when we used the Khronos demo repository to test, we were unable to get any of the demos to work.
For the HTML5 developer out there, heed the warnings when using localStorage or WebSQL in a packaged app on iOS 5.1, and don’t expect any new HTML5 features in iOS5.1 Mobile Safari.
### Retina iPad
For HTML5 developers, the most obvious thing about the Retina Display iPad is the huge number of pixels that the device now manages. The new iPad sports a resolution higher than a 1080p television. User interfaces are doing more than 4x the work pushing all the new pixels around. The new iPad houses an Apple A5X CPU together with a PowerVR SGX543MP2. The A5X is a dual core ARM-Cortex A9 design, running at 1GHz, and the GPU is a quad-core design running in roughly the same graphics class as the Nvidia Tegra line. From what we can tell, the main difference between the A5 (which powers the iPad 2 and the iPhone 4S) and the A5X is the new quad-core GPU. Given the new pixel density, it stands to reason that it’s the most upgraded component of the new iPad’s processing subsystem.
Since we’re focusing on HTML5 developers, we focus on web benchmarks for performance. We re-ran the iPad 2 with iOS 5.1 along with the new iPad with iOS 5.1 and found a set of interesting results. As usual, we turned to SunSpider and the V8 Benchmark Suite for raw JavaScript processing power. We found (and perhaps given the new display’s tax on the whole system this is unsurprising) that new iPad was marginally slower than the iPad 2. The SunSpider score is about 150 points slower than the iPad 2, and the V8 Benchmark was 45 points slower. We ran the tests a few times and while the specific numbers were a bit different each time the overall result was the same: on pure JavaScript processing, the new iPad is slower than the iPad 2.
We then turned our attention to some complex web sites and apps to see how the new iPad performed with graphics. We turned to our Sencha Animator Kickfu demo, which is a very complex CSS3 animation, and were pleased that it ran reasonably well. Wanting to push it a bit further, we decided to pinch-zoom in and try to play the game again and this time we saw an immense amount of tiling occurring. This severe tiling seems to have been introduced in iOS 5, so it’s not a new iPad thing, but definitely an artifact introduced in newer iOS’ that hasn’t gotten better with new hardware.
Our tests always include Canvas, and we tested our two current favorite Canvas apps, Canvas Rider and Canvas Cycle. Both of them test the CPU/GPU and the browser’s Canvas drawing engine. The new iPad does fine here, rendering both of these examples with the same performance as the iPad 2. Given how fast the iPad 2 is, it’s impossible to visually discern any difference in Canvas performance between the two devices.
In general web browsing, we did notice one notable difference between the iPad 2 and the new iPad. It draws much more slowly on complex pages. For example, on the Ext JS examples page, when scrolling the page, it visibly loads in new tiles at the bottom of the page while moving. Also, when zooming in on image rich pages such as our Sencha Touch 2 product page, the same tiling behavior occurs again that rarely occurred on the iPad 2. It’s clear that this is due to the the new Retina Display. It’s very likely that images and other assets being transferred to the GPU are taking more time (and bus bandwidth) than the device can handle in real time.
We’re definitely not hardware or chip experts here, but we figured we’d dig a little with the iFixit breakdowns to see why this might happen and if were parts on the new iPad that were not upgraded to match the new resolution. The iPad 2 uses an Apple A5 System on a Chip, which includes 512 MB of DDR2 RAM in the SoC package. Compare that to the new iPad which has an A5X SoC, which does not include the memory in the SoC package. Rather there are two 512 MB Elpida DDR2 chips. The new iPad has two times the memory, and four times the pixels to push, but runs the memory bus at the same speed as the iPad 2. Again, we’re not experts on embedded systems design, but it stands to reason that some of the graphics performance issues we are seeing, (especially tiling and performance degradation from box shadows) might be caused by this system imbalance.
### The New iPad and iOS 5.1: tips for the HTML5 developers
We’re usually effusive about the latest mobile browser and hardware from Apple. But this latest offering is a mixed bag at best and a disappointment at worst. For the last few years, we’ve grown accustomed to Apple leapfrogging the competition each year with superior hardware and even better HTML5 browser software. The latest set of Apple hardware has regressions compared to the iPad 2 including slower JavaScript performance. And with iOS 5.1, the removal (or breaking) of features that developers have trusted is a real letdown. While we believe that the iPad is still the best tablet in the market, it’s the first time a new Apple product hasn’t categorically outshone its predecessor. Particularly for business applications, there is no reason to choose the new iPad over the iPad 2.
Thanks for the scorecard, Aditya! At Modus, we felt the same lack of enthusiasm for performance.
Great post, Aditya. It was very interesting to see the difference in performance when Jay loaded up our Rvrsit game on the new iPad. All of what you’re saying makes sense in terms of the graphics performance.
I’m *really* hoping CSS regions comes in the next update. That would make doing columnal layouts of text, which is still one of the most difficult things to get right today, trivial.
Good post. The iOS 5.1 web storage issue is a huge deal. Thanks to some quick work by PhoneGap developers, I’m now using a plugin that backs up and restores HTML5 web storage to/from a permanent location (soon to be an official plugin in Cordova 1.6).
Wow. Disappointing.
Great article! But I’m very disappointed in iOS 5.1. specially the localStorage. It should be persistent.
The PlayBook OS browser drastically outclasses the iOS browser. Not only does it support virtually everything that is found in Chrome at this point, but it also has excellent support even for old things — such as being able to upload files from your mobile device using the regular old HTML file submit form. Which I don’t think any of the others do, or if they do, they do it piss poorly.
The new iOS is definitely a big let-down for me. I’m still struggling with people who are not like-minded yet and love native stuff. Apple seemed to do a great job of giving web-developers a way of doing a lot of stuff, up till this release.
It hurts that iCloud pushing is more important than local storage persistance and that performance (even on older devices like the iPad 1) for web apps is probably not considered a main priority over having great graphics on the 2012 iPad.
Creating hybrid apps always felt to me like the ’90s all over again, and now Apple starts to feel like the new Microsoft.
The local storage and websql breakage does not seem to be intentional. Bugs filed with Apple remain open and it looks as though they are investigating it seriously. This issue even affects html widgets in iBooks. Meanwhile, there is a workaround that allows persistence to work again – however your app will still be subject to arbitrary cleanup when the system is low on space unless you backup and restore the database (as the phonegap plugin does) or you move the database location on the file system (another webview plist setting – a better option than backup and restore but we don’t know how Apple feels about this yet)…
In short – its not as bad as it sounds or a show stopper, although it looked rough for a short while.
If its not too much trouble could you please include the Asus Prime + ICS in your benchmark tests ?
Bench marking against up to date android devices would be very interesting here. The post gives an interesting view of how the new iPad compares to its predecessor, but googling around, the results are very mixed for tegra based divides ( namely the Prime ). Benchmarks seem to indicate the Prime being faster in some respects ( it scores better on browsermark ), whereas the iPad is better in others ( sunspider ). Which works better on Sencha? A benchmark similar to the one you guys have to show performance metrics across releases would be very cool here.
Regarding Apple breaks web storage in iOS 5.1:
“Discussions on the Apple developer forums during the beta period for 1OS 5.1 show that Apple was aware of the issue and that it is by design. The impression given is that Apple was annoyed by the number of apps using web storage to speed up their apps (whether web or native) rather than just storing customer-created content, and felt it was imposing too much burden on the constrained storage space in an iOS device.”
http://www.itwriting.com/blog/5656-apple-breaks-web-storage-in-ios-5-1-does-not-care-about-web-apps.html
Can anyone confirm if the WebSQL / localStorage issue also affects web apps running in full screen mode (not hybrid apps)? What I am seeing is that my WebSQL database is still being stored in the Library/WebKit folder and not in the Library/Caches folder, which supposedly means it should still be permanent. I also was not able to reproduce the issue of the db getting deleted upon upgrading to iOS 5.1.
@bvdr – it does not affect web apps running in full screen mode.
Thanks, Michael. My findings definitely support that hybrid apps are affected, whereas full screen apps are not.
If anyone finds this interesting, I downloaded the “Performance” app discussed at http://www.itwriting.com/blog/5656-apple-breaks-web-storage-in-ios-5-1-does-not-care-about-web-apps.html. I verified that in iOS 5, it stores its localStorage data under the WebKit directory in its app directory. I then upgraded to iOS 5.1, and my notes in the app were gone. I saw that the upgrade process had removed the app’s WebKit folder, and that the localStorage db was no longer being stored there when I added additional notes. I couldn’t find the localStorage db, but I was looking at the files through an iTunes backup, so I assume it was going into the caches folder, which wasn’t being backed up.
Apple is slowly but surely starting to go the way of Netscape or rather Microsoft, for those of you born after 1995. Their products are starting to have that “well our name is so big, people will buy it just because so we dont need to innovate anymore.” It’s starting to be gloss over performance.
It would be interesting to see a benchmark against Playbook with the latest update. I tested my Playbook on html5test.com got a 373 + 9 bonus points. Then compared against browsers on tablets with iOS 5.1 and Android 4.0, huge difference. RIM OS 2.0 has 49 points more than iOS 5.1 and 100 points more than Android 4.0 tablets. I’m updating to RIM OS 2.1 to run a test, however according to html5test.com I should expect a 381 + 10 bonus points. Wandering why you guys keep comparing a third generation tablet against a tablet which is first generation as BB Playbook without using an up to date OS version?
@eduardo – stay tuned for our playbook OS2 review – it’s coming this week.
It’s really no surprise the new iPad is slower with the “retina” display, and definitely have to agree with Jonathan Mines’ comment… Once Microsoft became untouchable, they introduced Vista and, unfortunately, the same thing happened when Apple introduced retina display tech on the iPhone – it became slower, and now their untouchable. Bigger gadget equals bigger problem. Can’t wait for the Playbook review, will definitely watch for it. Thanks!
“While we believe that the iPad is still the best tablet in the market, it’s the first time a new Apple product hasn’t categorically outshone its predecessor”
Have you looked at the Asus Transformer Prime? I believe you will find decent competition here. IMHO, between the expandable memory and docking station the IPad cannot begin to touch this tablet.