Apple’s new iPad has a beautiful screen, but often struggles to smoothly display and scale even average webpages.

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.

SunSpider v0.91 Results, smaller is better.

V8 Benchmark Suite v6, bigger is better.

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.