About this experiment

The only images used in this experiment are the tiny Windows flag that serves as this panel's icon and the desktop wallpaper, courtesy of Jiuguang Wang. Most of this page works just fine in the 3 latest versions of the major browsers. Oddly enough, Chrome is the most buggy. Firefox works best. Here's the issues I came across

vh/vw units

Chrome 27 and Internet Explorer 10 either don't support vh and vw units or they can't handle them in the CSS transform property, especially in combination with calc(). That's why the dialog box is centered on screen only in Firefox. More info...

CSS prefixes

I think by now everybody's agreed on the idea that these are messy and bad. Although jQuery takes much of the drudgery out of this, that won't help when setting the properties through regular CSS.

Hall of shame

• Firefox still doesn't support box-sizing, but insists on -moz-box-sizing. What gives, Mozilla? Even IE had this in version 8! More info...
• WebKit based browsers (Chrome, Safari, and now Opera) still require -webkit-transform (a step backwards for Opera). IE10 and Firefox support the unprefixed versions. More info...

Font rendering

Chrome's rendering of Segoe UI Semibold (set by font-weight: 600) is ghastly. Only Firefox shows the "X" in the close button the way I like it. Outlining fonts by using multiple text-shadows is cumbersome and doesn't look good at a zoom-level other than 100%. And no, -webkit-text-stroke is not what I mean. It is not an outline, as the stroke also goes over the inside of the text and worse, it's not officially in the CSS3 spec.

Dumb (and ugly) default styles

IE even in version 10 clings to the almost 20 year old convention of showing an ugly border around images enclosed in an anchor. Version 10 with its touch-centric interface sets a background on a:active which makes the titlebar of whatever window is being dragged look ugly.

Things not supported that would've been useful

Most of this is CSS' fault, I think.

• The aforementioned font outlining. A thickness and colour would be nice.
• Being able to replace just one of multiple backgrounds/box-shadows in an overriding rule. Can't think of a nice syntax for it though.
• Ability to use linear-gradient in border-image.

Performance

Pre-webkit Opera, using the Presto rendering engine, is incredibly slow when dragging panels when the zoom-level is not at 100%.

Using CSS transform: translate is a lot smoother than using top/left. If you don't care about older browsers, use it.

background-size: cover feels sluggish in Firefox, as if the entire image is rescaled upon reflow, even if the dimensions that matter are unchanged.

And just a little something weird

Pre-webkit Opera seems to apply box-sizing: border-box on :before and :after elements generated inside buttons, unless they are explicitly set to box-sizing: content-box.