Seadragon Ajax on the various browsers

December 4, 2008

Because Seadragon Ajax is based on the standards of the web, its core functionality works on all modern browsers: Internet Explorer, Firefox, Safari, Opera, Chrome and probably even others. And as far as we know, we work on every OS that’s supported by a particular browser.

Of the above browsers, we officially support (e.g. we’ll prioritize bugs on) the most recent and stable versions of the mainstream browser/OS combos: IE 7 (Win), Firefox 3 (Win/Mac) and Safari 3 (Mac). We’ve also been working with the IE team to support IE 8 beta 2 as much as possible, and we’ll support IE 8 when it’s released.

But while Seadragon Ajax functions on all modern browsers, it doesn’t function the same across the board. You may have noticed this already, both in performance and in “beauty”. The main reason for this is in the way we render.

Since the Deep Zoom file format consists of individual image tiles, one way to render is to just place an <img> element onto the page for each tile, dynamically positioning and sizing it as you pan and zoom. This is the technique used by Google Maps, Virtual Earth, etc.

Another way to render is to use the HTML 5 <canvas> element and draw the tiles onto it directly. We wouldn’t have a compelling reason to do this, except that Firefox and Opera have implemented <canvas> with subpixel precision. This has a huge benefit for us in that it gets rid of the “jitter” as you zoom.

The cost of using <canvas> is a noticeable hit in performance, but subpixel precision is well worth it. So if the browser is Firefox or Opera, we’ll use <canvas> technique for rendering, otherwise we’ll use the faster <img> technique. 

There are some other variations between browsers which affect the end-user experience, but to a much lesser degree. The most obvious is the speed of the JavaScript engine, but surprisingly, this doesn’t make a noticeable difference. What’s more important is the browser’s speed in rendering images; this is what determines our framerate most directly.

For image quality, the way the browser scales images makes a visible impact. IE, by default, uses lower-quality nearest-neighbor interpolation, while other browsers vary between bilinear and bicubic interpolation, both higher quality. This strongly affects text readability in particular.

The effect of image scaling on text in Seadragon Ajax

The effect of image scaling on text readability in Seadragon Ajax (click for full resolution)

Note that IE does allow for bicubic interpolation, but using it causes visible seams on tile edges, so we’re still investigating alternatives.

All in all, we tried hard to work across all modern browsers, but we also wanted to take full advantage of beneficial browser-specific capabilities. If you notice any problems, or want to suggest additional features we should consider, don’t hesitate to leave us feedback! We look forward to hearing what you all have to say.


One comment

  1. We don’t officially support it on Linux, but it does work in the Linux Firefox. It has problems in Konqueror.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: