iPad 2: The HTML5 Developer Scorecard
If you remember back to last week, in our review of the Motorola Xoom browser, we were less than excited about the quality of the Xoom as a modern web app platform. Our experience to date with Android has been lackluster, starting with the disappointing browser in the Galaxy Tab and the Xoom. We knew from our experience that iOS provides a great modern browsing platform, so we had high hopes that with the iPad 2 it would get even better.
“Apple truly delivers a top rate, no compromises HTML5 browser.”
We got our hands on an iPad 2 and ran it through our standard HTML5 tests. The iPad 2, like the first-gen iPad doesn't disappoint. It's fast, it's accurate and it's impressive. Apple truly delivers a top rate, no compromises HTML5 browser. Read on for the full test results.
Our First Look "Methodology"
Acid3 and Modernizr
The iPad 2, like the iPad first-generation, scores a 100/100 on the Acid3 tests. But we did find a few small rendering issues. If you look carefully at the image, you'll notice a few light red squares in the top right and in the bottom right of the test results. In the Acid3 reference results, the edges of the test area do not have any of those glitches. Without a doubt, the iPad 2's Acid3 results are solid, but it would have been nice to see this come up to full compliance.
We then turned to Modernizr, one of our favorite tools to look under the hood of a browser and let us know what HTML5 features it supports. Modernizr reported that nearly all the major browser features are supported on the iPad 2. Modernizr found support for SVG, CSS 2D transforms, CSS 3D transforms, CSS transitions, WebGL and Web Sockets. Interestingly enough, Modernizer reported that there was no Inline SVG although we were able to try a few demo sites and saw that it did in fact work, and it also reported that the browser supports WebGL, which we couldn't get to work. (Update: the working inline SVG examples were in XHTML pages, not plain HTML pages, so Modernizr was actually correct about iPad2 still not supporting inline SVG for HTML pages). As we found in our earlier scorecards, just because a browser says something is there, it doesn't mean it works. All the other HTML5 features except the ones mentioned worked beautifully.
Without a doubt, the iPad's Mobile Safari browser has the best CSS3 support of any mobile browser we've seen. We tested six demos that were made with Sencha Animator and they worked beautifully. All the frames were rendered, and the frames were rendered accurately and in full fidelity. Given the stuggles we had with complex animations on other devices, we're excited to see the iPad 2 hold the bar high and deliver a truly great CSS3 implementation. We also ran through our CSS3 vs Flash ads page and of course the Flash version of the ads didn't render, but the CSS3 ads worked perfectly well. The iPad 2 nails CSS3.
We also tested a few other real world areas for performance and correctness. First off, we tried a github network graph. Rendering performance is fine and rendering is accurate. We ran into issues with trying to move the graph around as the browser was often confused on drag events. Instead of panning the graph, it often panned the entire page. This looks to be a trend in the way click/drag events are handled for Canvas objects in WebKit browsers as we've seen it on all tablets we've tested. We also tried Canvas Cycle and it was amazing. The framerate was high, the UI controls were responsive and the scene updates quickly. We thought this time we'd also try some more intense Canvas apps, so we tested Canvas Rider, a game made with Canvas and did a few of the ghost runs on the iPad 2. While it wasn't quite as fast as a desktop, it didn't have any issues being usable. Canvas support on the iPad 2 is first rate.
Finally we tested embedded HTML5 audio and video. Again, the iPad 2 nails it. Audio plays back quickly and lets you pause and resume. Video comes up quickly and streams without issue in the browser page. The iPad 2's media support is solid.
Sencha Touch Kitchen Sink
Given that the iPad 2 has tested to be the best mobile browser we've seen yet, as you'd expect the Sencha Touch Kitchen Sink works quite well. Animations were snappy, lists scrolled quickly and everything just worked. Sencha Touch relies on high performance CSS3 and as our CSS3 testing earlier showed, the iPad 2 performs well in the pure CSS3 tests as well as in our Kitchen Sink.
iPad 2: Suggestions for the HTML5 App Developer
The iPad 2's Mobile Safari browser is the best implementation of WebKit on a mobile device. In our testing we tried to throw everything we could at the browser and it had no issues keeping up with the most advanced HTML5 and CSS3 sites. For any developer building for the mobile web, the iPad 2 provides an outstanding platform from which you can use modern browser features.
Apple's devices are leading the vanguard of mobile browser innovation and for the HTML5 app developer this is great news. We're excited to see not only the rate at which Apple adds new features, but the quality of their implementation.