An experiment mimicking the Dock of OS X using only CSS

Have there been any usability tests (or even just a logical argument) that show the OS X-style dock to be a good UI mechanism?<p>Seems to me that turning off magnification and flushing it to a corner (so that everytime it grows it doesn't move around the existing icons) would have been a better default solution.<p>Apple usually thinks these things through though so maybe I'm missing something?

I am seriously impressed. Thanks for sharing!<p>I wish there was an easy way to fit this into some of my projects. I don't mean the browser incompatibilities others have pointed out, either!<p>I feel like the idea of using this in a practical application is stunted by the "Ikea effect" of something looking awesome in the showroom but crappy in your actual house. Unless you take great pains to make sure that everything in a room matches thematically, it will look like a careless hodge-podge of well-intentioned designs that don't work well with each other.<p>The reason it looks great inside OS X is that Apple have put years of thought into how the Dock fits in with the rest of the user experience. You can't drop a dock into an application without putting real thought into whether it's the right navigation tool.<p>It's usually not the right navigation tool, but it sure is pretty.

It works on the latest Google Chrome and Firefox on the latest Ubuntu and looks nice. On my several years old computer both cores used around 20% to 30% while moving between the icons at a normal pace. Not critical and good performance, comparable to a few flash sites I checked for comparison.<p>One of those flash sites seemed to mess up the browser and the subsequent flash dock sites failed to load correctly. I don't see this with HTML 5 and CSS sites which achieve the same level of feature usability.

Does not work properly in two of three browsers I have. I don't see a reason why not use javascript in cases like this. I get it as a showcase of power of css but please, don't use this on your websites (yet). Here's[1] an similair example from 2007, works just fine in all three browsers I tested.<p>[1] <a href="http://www.ndesign-studio.com/demo/css-dock-menu/css-dock.html" rel="nofollow">http://www.ndesign-studio.com/demo/css-dock-menu/css-dock.ht...</a>

Wasn't Google's homage to the OS X dock, done in 2005, also using pure CSS? <a href="http://www.macworld.com/article/43631/2005/03/googlex.html" rel="nofollow">http://www.macworld.com/article/43631/2005/03/googlex.html</a>

Is something like -webkit-box-reflect available on other browsers? It seems to be totally non-standard (none of the CSS specs mentions it).

Works great in Safari. In Chrome, there is a flicker when you click an icon. Sometimes the entire window flickers white.

I think the growth rate should be adjustable easily. What's your approach to this problem?

It looks nice on Safari, but I do echo other people's comments: the code looks like it uses non-standard mechanisms for achieving it's goals and had to be tailored for specific browser families. To me, that's a "code smell".

The link to the old version leads to a 404.

Don't shake the platform when the user moves the mouse across the icons; the effect is rather nauseating. (FF 9.0 on Win7)