Windows Phone 7.5 "Mango" - Mobile IE 9 Browser Explored

Yesterday we spent a considerable amount of time poking around inside the Mango emulator included in the windows phone developer tools 7.1 beta. The emulator is pretty locked down, just like we saw with the original WP7 emulator after MIX10, only internet explorer and a few settings are exposed. A number of people at XDA are already hard at work unlocking any hidden components in the emulator so we can see everything there is to see inside Mango, but until then we toured the browser and settings pages comprehensively.

 
Left: Windows Phone 7.5 with Trident 5.0 based browser, Right: Windows Phone 7 NoDo with Trident 3.1.

Microsoft made a big deal about the browser in Mango being entirely based on Internet Explorer 9. It turns out they weren’t lying. The user agent on Mango reports itself as “Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; XBLWP7; ZuneWP7)” in desktop mode, and “Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0; Microsoft; XDeviceEmulator)” in mobile mode.

Top: Mobile mode, Bottom: Desktop mode

I’ve already referred to Mango as Windows Phone 7.5 a few times, and there’s the reason - it’s right there in the user agent. Trident 5.0 also is the layout engine used in Internet Explorer 9, and it’s a far cry from Trident 3.1 bundled in the original Windows Phone 7. 

Trident 5.0 most notably includes SVG, HTML5, CSS 3, and a new JIT compilation accelerated JavaScript engine named Chakra. It only seems fitting that we test everything and see whether IE 9 on WP7.5 is just as competent as the desktop version. I came away very impressed with how things turned out. 

Before we go into standards compliance, let’s talk about UI. The entire browser application is redesigned. The URL bar has been relocated from the top to the very bottom of the phone, and the three icons that previously were there for favorites, tabs, and the like have been removed. The result is that there’s now more screen area dedicated to actual browsing, something I think other mobile browser still need to pay attention to. You can see these differences in the first set of screenshots at the top of the page. It's an even more minimalist layout that arguably fits well with the Metro UI "less is more" philosophy.

Landscape view also now keeps the URL bar at the bottom and visible, and one can enter URLs in landscape as well. The result is that landscape viewing is now completely supported for more than just viewing pages - previously the URL bar and bottom navigation would disappear in landscape. This is a definite improvement. What’s been interestingly removed is the ability to create a custom tile for an individual page - previously pages could be pinned to the launch screen as tiles. 

Another notable improvement is that text no longer appears extremely jaggy when zooming in quickly. Previously, we noted that this was an aberration resulting from how pages were rendered into a texture, it appears this behavior has been dramatically improved for the better, and as a result text has much more smoothing and quickly changes to proper size when zoomed in on. Further, when zoomed out, text previously didn’t utilize any subpixel font smoothing, resulting in body size fonts looking like they had a bitmapped appearance when zoomed all the way out. This is now dramatically improved as well. It's difficult to illustrate, so I'd encourage you to check out the video further down on this page. 

I also always got the impression that WP7 had a very limited subset of fonts supported, only one or two for each primary style class, and as a result pages often rendered faithfully but with horribly wrong fonts. This now also appears to be much, much improved, from the pages I’ve browsed the difference is dramatic.

I’ve put together side by side comparisons of a few popular pages to illustrate how things are different by using both the WP7 “NoDo” emulator and the new Mango WP7.5 emulator released yesterday. I was loading live sites on both emulators (which required an uninstall and install), so there are some subtle differences in content, but the major things to pay attention to are layout, font, and the like. Like the rest, these are 100% resolution captures that I'd encourage you to inspect at native resolution. The Mango WP7.5 browser is on the left, the old WP7 browser is on the right. 

With the layout differences out of the way, on to standards compliance tests. The first test is the popular HTML5test designed by Niels Leenheer. It gives an overall score and nice breakdown of what HTML5-esque browser features test and appear to be supported. It also includes a test for whether SVG graphics are supported. I’m not a huge fan of synthetic web tests, but HTML5test does do a nice job at breaking down support in an easy to follow manner. 

IE 9 on WP7.5 performs almost identical to the desktop version of IE 9. Both score 130 and 5 bonus points, though the WP7.5 version of IE 9 doesn’t fully support @font-face as shown by the lack of custom font on the score report.

This is a huge improvement from how WP7 did previously in HTML5 test, where it scored 12 and no bonus points.

One of the other important HTML5 features is new form field types, something that generally gets overlooked when side by side with other shiny features.

I used a test put together by my good friend Jesse Gunsch and ran through it in the emulator, unfortunately WP7.5 still lacks support for many of the new form types, but no doubt making many of these work will require considerable UI work to match the Metro theme elsewhere. This is also reflected in the HTML5 test results, where it shows virtually all the form fields lacking support. 

Next up are some things from HTML5demos.com which illustrate a number of new HTML5 features. You can see for yourself which ones are supported by the green circle to the left of the objects, and for the most part it’s exactly what IE 9 supports, with a few exceptions.

Unfortunately the WP7.5 browser doesn't play back video tag elements that are H.264, though this could be because the emulator lacks the ability to emulate hardware decode blocks that would be present on WP7 devices SoCs. There are individual results in the gallery at the end from these tests.

Next up are the two ACID tests. Previously, WP7 catastrophically failed both tests. Before and after are a dramatic difference. 

WP7.5 now comes very very close to passing the ACID 2 test, failing only because the top of the smiley face is missing. It also comes close to passing the ACID 3 test. It’s a dramatic improvement for both synthetic tests. The IE 9 team has made it clear on a number of occasions that it doesn’t see fit to build browsers around synthetic tests, but that said it’s clear that regardless the Trident 5.0 engine is considerably improved over 3.1. 

SVG support is also important, and as shown in the HTML5 test there’s compliance flagged, but it’s still important to test how it behaves in practice. Animation for SVG doesn’t work, but image tag SVGs work absolutely fine, which is likewise a considerable improvement. 

There's a full (locked, current) emulator tour in the gallery, including a number of more tests and pages taken from the emulator, all from the Mango beta. 

There’s only so much one can communicate about how a browser looks and performs with still images and test results - things like smoothness, how zoom levels behave, and how both overscroll and fast scrolling look can only be illustrated with video. I’ve put together a video showing the WP7.5 browser being used to go through a number of tests and load pages on AnandTech, DailyTech, and NYT. The new browser still appears to render the page in successive chunks, and there’s a visible grey line at the edge of the current render progress when scrolling beyond the render state. Still, it’s pretty speedy. 

The next part of what’s changed is performance, both of JavaScript thanks to the new JIT compilation engine, and general browsing speed. To test this, we compared performance on the same computer between the WP7.5 “Mango” emulator image and the WP7 “NoDo” image. It isn’t an apples to apples comparison considering that it’s likely the emulator has seen some changes, but on the exact same platform the difference in performance gives a taste for how things will be in practice later. In both emulators, hardware acceleration is used (WDDM above version 1.0 enables hardware acceleration in the emulator) and virtualization assistance (VT-x) is disabled.

First is JavaScript performance which is substantially better now. The NoDo WP7 JavaScript engine performs extremely slowly in the emulator. Next, Browsermark shows a substantial difference in score between the two browsers, which reflects the improved JavaScript engine and HTML parsing speed.

The final part of the puzzle is actual page loading speeds, where we measured the time taken to fully load each page three times, threw out any outliers, and averaged. Between each page load, the cache was also cleared fully and every tab was closed. The desktop version of these websites (when appropriate) is loaded. Here results are a bit surprising, with the WP7 browser besting the WP7.5 browser in three of the four websites.

The tradeoff is clear however - the new browser includes a substantially improved JavaScript engine, HTML5 and overall standards compatibility, and better rendering quality but at the expense of some speed on initial page load. Even then, we’re looking at beta software in an emulator, so it’s possible performance will improve even more before launch. It's completely clear that the Windows Phone team recognizes that having a fully compatible browser is absolutely necessary on any smartphone platform, and have spent considerable amounts of time improving things in the mango update. At this point, the only major things missing from the browser are Flash and Silverlight support, which hopefully will get included eventually. One thing's for certain - it's going to be a long wait until the fall when the update hits existing WP7 devices.