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.”
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/188.8.131.52 Safari/535.1)
The PlayBook OS 2 supports up to 4 simultaneous touches, so interactions that rely on two simultaneous pinch/zooms are possible.
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.
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:
<filter id="demo"> <feMorphology operator="dilate" radius ="4" /> <filter/>
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.