Sencha Inc. | HTML5 Apps

Blog

HTML5 Scorecard: RIM BlackBerry PlayBook OS 2.0

April 26, 2012 | Michael Mullany

20120426-blackberry-playbook-sm 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.

Perfect 100/100 Acid3 Test in the BlackBerry PlayBook OS 2 browser
Perfect 100/100 Acid3 Test in the BlackBerry PlayBook OS 2 browser

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.

SVG Filters in the BlackBerry PlayBook OS 2 browser
SVG Filters in the BlackBerry PlayBook OS 2 browser

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:

<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.

20120426-blackberry-playbook-2-badge

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.

There are 12 responses. Add yours.

Chris Alfano

2 years ago

What does the lack of mask support mean for Sencha Touch?

Jay Garcia

2 years ago

I absolutely love these types of blog posts. Thank you for taking the time to do it.  Would have loved to see the awesome Js benchmarks that you guys do!

Michael Mullany

2 years ago

@chris - it means the default icon set can’t be themed with masks, and you have to create image based icons (or use SVG masking)

Leonardo Braga

2 years ago

@Michael - is it possible for Sencha to support SVG masks as a fallback so we could leverage the same icon set for the devices that doesn’t support “-webkit-mask”?

tonikitoo

2 years ago

Just a fyi: RAF will be supported in OS 2.1, coming out soon.

interfaSys

2 years ago

I think this review has to be updated after having tested 2.0.1. The lack of support for -webkit-mask in 2.0 was a regression. The default icon set works just fine on 2.0.1 and other performance issues have also been fixed.

Michael Mullany

2 years ago

@interfasys - will do the OTA and test masks again for 2.0.1 - thanks for the heads up.

@tonikitoo - what is RAF?

interfaSys

2 years ago

smile
&
RAF = requestAnimationFrame

mantiz

2 years ago

a 100/100 on acid! this looks good smile

John Breker

2 years ago

the latest breakthrough from the research in motion. it seems competition between rim and android will be more competitive, by the way how to upgrade from OS 1 to OS 2..?

Dheeraj Bansal

2 years ago

That’s the reason Blackberry OS has very sound position after Android and iOS in the market.

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.