Motorola Xoom: The HTML5 Developer Scorecard
We posted our last HTML5 developer scorecard in December when the Samsung Galaxy Tab was released. At that time it was the first Android tablet device, running Android 2.2. A few months later we have the Motorola Xoom, the first Android 3.0 / Honeycomb device on the market, which is being touted as the first true Android tablet. Like we did with the Samsung Galaxy Tab we’re going to put the Xoom through the wringer, focusing on the browser to see how it performs and behaves for the mobile HTML5 developer. The short answer? The Xoom browser is not ready for prime-time – even for “HTML4” – and it urgently needs a patch update if Motorola wants the product to succeed.
“The Xoom browser is not ready for prime-time, even for HTML4.”
Our First Look “Methodology”
As usual we’re going to test the Motorola Xoom’s browser in four areas: standards using Acid3, features using Modernizr, performance using SunSpider, and a set of real world tests.
Acid3 and Modernizr
The Xoom scores an impressive 100/100 on the Acid3 tests. This is the first Android tablet that has given a 100 score, which means a couple of things have gotten better, most notably the addition of SVG support. But to understand the true results of an Acid3 test, we have to look beyond the number and compare the final result with the Acid3 reference results, and the shine starts to wear off. The Xoom has two noticeable rendering bugs — first, the letters “Acid3” are the wrong color and are missing the drop shadow. Second, in the top right there’s a small red box, which is an obvious rendering bug. The Xoom has a perfect numeric score, but it still fails Acid3.
We move to Modernizr, a great tool to see what a specific browser supports. The Xoom moves Android a long way forward. Many features that were not supported in the Galaxy Tab are now supported. Modernizr detects a fairly complete range of HTML5 features, including SVG, Inline SVG and CSS3 3D transformations. There are still features lacking such as WebGL support and Web Sockets and Web Workers. We’re excited to see Google pushing Android forward and working to modernize the Android browser, but as we’ll see later that just because something is present, doesn’t mean it works.
The Xoom’s browser is a much newer version than the browser that shipped in earlier Android based tablets. Under the hood, the browser’s User-Agent reports WebKit version 534.13 which is very recent. The Motorola Xoom boasts some serious hardware firepower, shipping the Nvidia Tegra 2, which is a dual-core 1GHz mobile chip. The new WebKit plus serious CPU power led us to expect that on the SunSpider tests the Xoom would perform well and it did. We compared it against the two other devices we’ve tested and the Xoom easily comes out ahead. The Xoom is indexed at 1, so all the results are in comparison to the Xoom’s results.
On the other side of performance testing, we also ran real world tests using our own CSS3 vs. Flash Ads page. As has been well publicized in the press, the Xoom does not ship with Flash so we were unable to see any Flash ads loading on our tests page. To make things doubly worse, the CSS3 animations are almost completely broken. We often found even for the most basic animations the browser skipped frames, incorrectly rendered elements, or didn’t run the animation to completion. If Animations were simply slow, that would be one thing, but the Xoom CSS3 Animation support faces basic correctness issues.
Moving to more complex animations, we next look at the more advanced CSS3 animations created by Sencha Animator. In an improvement from the Galaxy Tab, the animations actually render. On the other hand, again, they render incorrectly. We found that text sometimes doesn’t appear, parts of the artwork are clipped incorrectly, fonts are rendered poorly, and frames of the animation are dropped. For some of the 3D effects, the browser simply drops the 3D or tries and fails to render the effects. For anything but the most basic CSS transitions and animations the Xoom does not make the grade.
It’s been nearly a year since Apple shipped the iPad and we’re still incredibly surprised that Google and Motorola have yet to build a mobile browser that has a correct and high-performance CSS3 implementation. The silicon power is definitely present to support it.
Unlike on the Galaxy Tab, Modernizr says the browser has SVG and in fact we are able to successfully test SVG. It performs reasonably well, allowing you scale the vector artwork quickly. We next look at Canvas by checking out a github network graph. Like on the Galaxy Tab the graph renders perfectly, and reasonably quickly. We did find that interacting with Canvas elements didn’t always work how we thought it would. The browser often starts to make big blue selection rectangles instead of passing a click event to the DOM. We also checked out Canvas Cycle on the device and we’re surprised that it works. The framerate isn’t great but it does actually work. So generally speaking, Canvas support gets a gentleman’s C.
Finally we test embedded HTML5 audio and video. We are able to get HTML5 audio to work, although we find that sometimes the audio plays even after we left the page or even closed the browser. We were unable to get HTML5 video to work at all.
Sencha Touch Kitchen Sink
As you might expect from the preceding tests, most of the Sencha Touch Kitchen Sink work, and the UI is smoother than the Galaxy Tab but it’s not a fantastic experience. The browser still has a long way to go accelerating CSS3 transforms.
The Motorola Xoom: Suggestions for the HTML5 App Developer
Any HTML5 app developer looking at the Xoom: wait for the inevitable patch(es).
We were excited about the first true Android operating system for tablets and had high hopes for a mobile browser that was as powerful as the platform. Sadly, the Xoom and Honeycomb are a real disappointment. We found consistent and reproducible issues in CSS3 Animations and CSS3 Transitions among other things. We had issues where the browser either hung or crashed. Regular scrolling was slow or below full framerate. We had issues where media playback failed or performed incorrectly. At times it felt like we were using a preproduction device, but we bought our test device from a Verizon Wireless store.
And beyond the HTML5 features, there were many more mundane web rendering issues: form element borders disappearing unpredictably at various zoom resolutions, CSS border radii with flattened edges, the accelerometer object being upside-down, the virtual keyboard causing layout bugs etc. Hopefully the patches will come quickly.
Until Google and Motorola ship a patch to update the browser to production quality, don’t expect good results from the Motorola Xoom. We said it in the Galaxy Tab review, and we’ll say it again now: we’re still waiting for the first awesome Android tablet. Next week we’ll do a sneak peak at HTML5 features in the RIM BlackBerry Playbook — but we’ll give you a one word prequel: “awesomeness”.