HP TouchPad: The HTML5 Developer Scorecard
“The TouchPad looks quite promising, but still seems rough around the edges.”
Our First Look “Methodology”
Acid3 and Modernizr
The Acid3 tests are a bit dated at this point, but still provide a fairly good indication of what the browser and developer experience on a particular device will be. The TouchPad scored 92/100 on the Acid3 tests. The failures are in bucket 5, and based on the fact that the browser attempted to download SVG files instead of render them for the test, it’s safe to assume that the low score is due to the lack of SVG support in the browser. Looking at the image further, you’ll notice two rendering artifacts. First, on the top left is the “You should not see this at all” message, and in the top right are a couple of squares. Given the relatively low Acid3 score on the device, these rendering glitches are not totally unexpected.
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. Since our last tests, Modernizr v2 has been released, so we used the test suite that Modernizr uses for our testing. The Modernizr suite failed after 241 tests were attempted (out of a total of 276). In these final, failing, tests, the Modernizr test results are compared against caniuse data, so it’s unclear if this is really a browser issue, or incorrect data used for the assertions.
(For comparison, the iPad scores a respectable 273, and a Honeycomb tablet scores 240. We believe low scores are often exacerbated by missing browser profiles in caniuse.)
Based on the Acid3 results, we knew that Modernizr would report that SVG isn’t supported and that’s in fact what emerged. There are a couple of other notable features lacking in the TouchPad’s browser. CSS 3D Transforms are not there, nor is there support for the HTML5 history API. Other than that, the TouchPad looks like most of the other tablets we’ve tested. We were happy to see that CSS animations were reported as supported.
We also like to take a look at the various device APIs that tablets support. The TouchPad has geolocation support, but webOS 3 continues to use a non-standard accelerometer API. When we tried to use the standard APIs, the device didn’t expose them in the global window namespace. We believe it would be very easy to write a polyfill to bridge these APIs, but for the moment the TouchPad continues to use a non-standard implementation.
Like all other tablets, the TouchPad and webOS use WebKit as their core browser technology. However what’s unique about webOS is the whole operating system is built on web technology, so the entire UI is built using WebKit. The browser reports in its User-Agent string that it’s running WebKit version 534.6, which is a very recent build, too. On the hardware side, HP has married that core software platform with a 1.2GHz Qualcomm Snapdragon dual-core processor. This is an interesting choice of speed, since the Qualcomm data sheet lists the processor at 1.5GHz which implies they’ve under-clocked the CPU, possibly for reasons of battery life or heat emission.
“The TouchPad screams—it has the fastest Canvas implementation we’ve seen.”
We also tested a few other real world HTML5 apps for performance and correctness. First off, we tried a github network graph. Rendering performance is fine and accurate. We had heard good things about the Canvas support so we decided to push the browser further. So, we tried some of the Microsoft mobile performance tests to stress canvas. Here the TouchPad screams—it has the fastest Canvas implementation we’ve seen thus far. For example, on the Mobile Speed Reading test, the TouchPad gets 16 FPS (PlayBook gets 10 FPS, iPad 2 gets 3 FPS, and the Xoom fails to load the test). Even more impressive is the Fish Tank demo, where the TouchPad hovers around 25 FPS. Canvas performance is stellar.
We noticed that during the Speed Reading tests, the browser opened up a separate window to play the audio in that test, so we were a bit suspicious when we moved on to our audio and video tests. And yes, it turns out when you try to use the audio tag, the device opens up a new window and doesn’t play the audio inline to the page. Sadly, the same thing happened with video. In the page, we managed to get a big play button, but clicking on the button launched a new window with a dedicated video player. It looks like the TouchPad browser is incapable of playing HTML5 audio and video inline.
Sencha Touch Kitchen Sink
One of the more interesting things that we found is that while running our Kitchen Sink through the browser, the app had decent speed and decent performance, but we had issues with scrolling and touch events. The browser captured swipes as viewport pan gestures and does not pass them through to the application, so swiping your finger to scroll lists caused the whole window to move. However, when we packaged a Sencha Touch app into an IPK (webOS’ packaging format) with the Palm developer tools, and ran the app in a native shell, the overall performance was significantly better, and the swipe gestures were detectable by the application. For now, this remains the most satisfactory way to deploy and run web apps on this device.
HP TouchPad and webOS 3: Suggestions for the HTML5 App Developer
Specifically for the HTML5 app developer, here are a few things to look out for when building for the TouchPad. Avoid SVG — not only is it not supported, when the browser encounters it, it does strange things. The same goes for audio and video. The browser attempts to download files it doesn’t recognize or isn’t able to handle and passes it off to another app. We’re sure HP will fix this in an update, but it’s best to avoid it right now. Lastly, be wary of complex CSS transitions and animations. At certain zoom states, or when combined with other CSS effects, the results are unpredictable.
We’re excited to have a new entrant in to the tablet space, and based on our testing, we think the TouchPad is off to a good start. There’s a way to go, and the browser is rough around the edges, but there’s definitely a lot of potential in the webOS platform, and we look forward to future updates.