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
Chrome 27 and Internet Explorer 10 either don't support
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...
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.
box-sizing, but insists on
-moz-box-sizing. What gives, Mozilla? Even IE had this in version 8! More info...
-webkit-transform(a step backwards for Opera). IE10 and Firefox support the unprefixed versions. More info...
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.
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.
Most of this is CSS' fault, I think.
box-shadows in an overriding rule. Can't think of a nice syntax for it though.
Pre-webkit Opera, using the Presto rendering engine, is incredibly slow when dragging panels when the zoom-level is not at 100%.
transform: translate is a lot smoother than using
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.
Pre-webkit Opera seems to apply
box-sizing: border-box on
:after elements generated inside buttons, unless they are explicitly set to