HTML5 Scorecard: RIM BlackBerry PlayBook OS 2.0

Last month, RIM released OS 2.0 for the BlackBerry PlayBook. We were already very impressed with the PlayBook 1.0 browser, and we were anticipating more, new and better. We put it through our HTML5 test wringer, and were pleased to find that the PlayBook 2.0 browser is an excellent upgrade, adding new features and upgraded performance in several areas. Notably, it features the first HTML5 color picker input type that we’ve seen on mobile, advanced SVG filters as well as a perfect Acid 3 score.

The original Blackberry PlayBook browser, released this time last year, was already a very solid HTML5 browser. In our original PlayBook HTML5 scorecard, we noted that it was far superior to the Android 3 browser and overall, an excellent HTML5 platform. We were particularly impressed with the quality of its SVG, Canvas and CSS3 Animation implementations. In this review, we’ll mostly concentrate on what’s new and improved.

“In our original BlackBerry PlayBook HTML5 scorecard, we noted that it was far superior to the Android 3 browser and overall, an excellent HTML5 platform.”

Our HTML5 scorecard consists of a series of tests aimed to help mobile web developers understand new devices and new form factors as they come to market. We test in an number of areas, namely JavaScript performance, HTML5/CSS3 features, rendering performance and rendering accuracy. We also use a variety of homegrown and third party test-sites, including Modernizr, Acid3, and our own Sencha Animator demos and Sencha Touch Kitchen Sink.

### Device Essentials

But first up, some essentials for the web developer. If you’re looking for traffic from the PlayBook OS 2, search for the following user agent string:

Mozilla/5.0 (PlayBook; U; RIM tablet OS 2.0.0; en-US) Apple/Webkit/535.1+ (KHTML, like Gecko) Version/7.2.0.0 Safari/535.1)

The PlayBook OS 2 supports up to 4 simultaneous touches, so interactions that rely on two simultaneous pinch/zooms are possible.

Next, JavaScript timer resolution. We’ve been looking at timer resolution on mobile lately and it can vary widely by device. For example, iOS 5.1 currently has a 4ms timer resolution with high consistency, Android 4 has a 10ms timer with low consistency. In contrast, the PlayBook 2.0 appears to have a 17ms timer. This means that script animations paced by a `setTimeout()` loop will run about 4x slower on the PlayBook 2 by default; a good reason to use explicit time in your web animations whether via JavaScript or time-based CSS3 animation. The PlayBook 2 browser doesn’t yet support the relatively new requestAnimationFrame API. For developers looking to use requestAnimationFrame cross-browser, we suggest that you use a polyfill to get the advantages of requestAnimationFrame when you can.

### Acid3 and Feature Detection

Just like the original PlayBook, the PlayBook OS 2 has a perfect Acid 3 score, with no rendering artifacts. Our favorite modernizr check sites, haz.io and HTML5Test report a very complete set of HTML5 features, including 3D transforms, HTML5 audio and video, web sockets, workers, web intents, SMIL, SVG and WebGL. What’s particularly nice to see is an almost complete implementation of HTML5 input types such as color picker and time.

Some minor missing features from the modernizr feature check: File API support, background-repeat, and IndexedDB. Since the only implementation of IndexedDB on major mobile platforms is the beta of Chrome for Android, this is not a very surprising omission (and WebSQL is still available anyway).

However, as we’ve noted before, just because a feature is detected, it doesn’t mean it’s working. WebGL, for example, won’t execute in a normal browser page on the PlayBook OS 2, and only activates when used in a WebWorks hybrid application. Similarly, some of the HTML5 input elements exist but you probably wouldn’t use them in their default style. For example, the time input has the unsettling habit of rewinding back to 0 when you spin past the highest value rather than looping. The color picker, while functional, is probably too spartan for use in a consumer application.

### Graphics Performance

In real world tests, Canvas and SVG performance was excellent, even on stressful demos like Canvas color cycle and the classic SVG floating balloon. CSS Animation performance was equally excellent. The only graphics effect we could see missing was robust support for image slicing in `border-image`. But no WebKit browser supports this feature properly yet, with the exception of recent desktop Chromes. We’re happy to report that the PlayBook 2 also has an excellent implementation of advanced SVG filters–morphology, diffuse lighting, specular lighting, custom composition filters–they’re all here. As with desktop browsers, it’s not possible yet to animate filters at an acceptable FPS, but even having static filters of this sophistication is an amazing advance for web developers everywhere. Instagram-like image effects are now available for anyone with the two to three days it takes to learn the physics and syntax of SVG filters.

Here is a screenshot from the PlayBook 2.0 of a morphology filter (from IE10’s SVG Filter demo page.)

The code for this is simple:

Just like in the original PlayBook, Sencha Animator CSS3 Animation demos work very well, handling multiple simultaneous animations smoothly and consistently.

We’re also happy to say that the PlayBook OS 2 has a rock solid implementation of `position: fixed`. Even with the fastest scrolling, we were unable to dislodge fixed content from its place on screen. `overflow: scroll` and `overflow: auto` also work smoothly (with one fingered scrolling vs. iOS’s two fingered scroll).

### Removal of Non-Standards Track Features

A last note–in a move that’s guaranteed to make anti-prefixers happy, the PlayBook OS 2 browser has removed support for `-webkit-mask`. CSS masks are very handy but have been hanging out as a WebKit only feature for nigh on four years. Although there is a new standards draft for filters and effects that aims to regularize this feature, since other engines do not appear to be on track to support the feature (Gecko wants you to use SVG masks instead), it’s probably a good idea to remove any critical dependencies on masks if you want your app to work cross platform in the future.

### A Very Fine HTML5 Browser

With the release of BlackBerry PlayBook OS 2, the RIM browser team once again delivers a high performance and up-to-date HTML5 platform for web app developers. For businesses that want to bet on a stable, state of the art device for HTML5 applications, the BlackBerry PlayBook with OS 2 is an excellent choice.