# Sunday, September 26, 2010

Whenever people compare performance between an iPad and a Windows Tablet, they always like to fire up the browser, try to pan the page around by dragging. Then finding not much difference between the two, they’ll then proceed to pinch zoom. At which point they’ll promptly point out that the Windows Tablet is slower because the browser will stutter during zoom instead of smoothly zooming around the page.

To see the effect which they’re seeing on your Windows browser (I don’t know wheter it’ll be the same on others), hold down CTRL and slide your mouse wheel up and down, this will zoom your browser in and out a few times, and you’ll see that it’s not a smooth zoom but rather in steps.

What the people are comparing with is a smooooooooooth zoom experience on the iPads, or rather most mobile browsers. Which looks something like this. (Below is a webpage hosted as an image by zoom.it, if you don’t have Silverlight installed the Javascript viewer will be used and it might not be buttery smooth). Just go ahead and fiddle around image by dragging it around, scrolling in and out with your mousewheel.

OK, so now you’ve seen the 2 types of zooming and panning which people like to compare tablet performance with. If you tried out both zooming methods you would also have noticed that the mobile browsers have a nice fluid zoom movement, whereas your desktop browser didn’t have that. Does this mean your desktop browser sucks?

Not really, because the 2 browsers don’t really zoom the same way.

A mobile browser renders the page into something akin to a very large and long image, zooming is then achieved by panning and moving around the image. Hence the use of zoom.it to simulate the mobile browser navigation experience.

A desktop browser renders the page based on how big the browser window is, dimensions defined in the document, etc. etc. For every page you view in your browser it has to perform a layout pass to determine where exactly to place that 250 pixels wide center aligned paragraph of 12pt text in the window. What does this have to do with zooming? When desktop browsers zoom, they are basically (I’m doing a very general explanation of it, I realize that it could be much more complicated than this) bumping up the defined sizes in the webpage, therefore at 150% zoom the 12pt text now becomes 12 * 1.5 = 18pt.

Because the size of the elements have changed the browser would have to perform a new layout pass whenever the zoom level is changed. This is not so much of a problem on a normal desktop where a user would explicitly select a zoom level from a drop down menu and immediately choose the zoom level they want. When operating with touch gestures the user is basically cycling through zoom increments at a rapid pace which desktop browsers weren’t designed for.

You might ask why don’t desktop browsers just implement a rendering method similar to how mobile browsers work, while that would just solve the problem of the desktop browser’s poor performance I’m sure some other deeply engrained legacy issue would crop up since that’s basically how IE, Firefox and Chrome work right now and there’s must be some reason why all 3 of them work essentially the same way.


Note that you can Post As GUEST as well.
blog comments powered by Disqus