archive for March, 2011

IE9, Firefox 4, and Chrome 10

The current generation of browsers is looking pretty good.  Not all of them support all of the features that I’d like to see (WebSockets, WebWorkers, HTML5 Forms, full CSS3, etc…), but they all have fast Javascript engines, canvas and audio tag support, which makes makes things like video games a lot easier to build on the web.  A few weeks ago, I built this little page to play around with drawing some animation on a canvas tag.

Canvas Sparks Screenshot

Canvas Sparks

 

One thing I like about it is that it gives me a sort of a benchmark to compare the different browsers.  For example, I had some real trouble getting the hidden footer bar to show up when you move the mouse over it in Internet Explorer 9 until someone from Microsoft suggested a workaround*.  I’m also able to measure the frame rate, which is a good indication of how fast the browsers are at rendering (at least for this scene).  Here are the numbers on my PC running maximized with the default settings:

Browser FPS
Internet Explorer 9 115
Firefox 4 45
Opera 11 25
Chrome 10 21

While this makes Chrome look pretty bad, it’s actually quite fast and comparable on most tasks. I’ve come to prefer it for most of my browsing (although, that was before IE 9 and FF 4 were released, so who knows if I’ll switch again). I tried Chrome with GPU acceleration enabled, but it actually rendered slower and incorrectly (there’s a good reason Google hasn’t enabled this feature by default).

On my iMac, here are the numbers:

Browser FPS
Firefox 4 41
Opera 11 40
Chrome 10 30
Safari 5 29

I’d be curious if anyone else is getting different rankings. Just mouse over the footer area to see your frame rate, or to play with the other options.

* Oh, and if you’re interested in the workaround. The problem was that the content of the footer DIV was hidden with display:none, so IE wouldn’t register the mouse being over it. Apparently, IE uses something called hard and soft hits to trigger the :hover selector. An “empty” DIV is treated as a soft hit. The workaround is to set a transparent background on the DIV, either with a transparent image, or with background:rgba(0,0,0,0) in the CSS style.