Google Chrome inset box-shadow bug on Windows, not on Mac: Better workaround?

Question

This is still current on Chrome 5.0.375.125, which is the latest Windows release at the time of this writing.

Bug is tracked here: http://code.google.com/p/chromium/issues/detail?id=25334

So, the problem is, if you're on Windows or Linux, and someone uses inset box-shadow on an element that also has border-radius, you get a bug -- the border-radius is preserved, but the inset box-shadow spills out of it, as if it were still a square box. It works as expected in Chrome on Mac OS X.

people using textured backgrounds can't use this hack, because it requires an opaque border color. It also only really works well on smaller radius.

Two parts to this hack. A little Javascript (jQuery + jQuery.client plugin):

if ($.client.browser == "Chrome" && $.client.os != "Mac"){
  $('html').addClass("inset-radius-hack");
};

And CSS

#div{
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
  -moz-box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 4px 0 inset;
  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 4px 0 inset;
  box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 4px 0 inset;
  padding: 5px 10px;
  margin-bottom: 10px;
  max-width: 120px;
}

  html.inset-radius-hack #div {
    border: 2px solid #fff; /* cover the edges with the border
    margin: 0 -2px 0 -2px; /* and take back the extra pixels the border adds
  }

Can I take a shower now? This hack makes me feel gross.

Has anyone come up with a better workaround for this?

Answer 1

You can get rid of the JS part by targeting safari via a css hack, as for the textured backgrounds you may use the same texture for the border (tricky! but works for some textures):

<style type="text/css">
#div{ 
  -moz-border-radius: 7px; 
  -webkit-border-radius: 7px; 
  border-radius: 7px; 
  -moz-box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 4px 0 inset; 
  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 4px 0 inset; 
  box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 4px 0 inset; 
  padding: 5px 10px; 
  margin-bottom: 10px; 
  max-width: 120px; 
} 

/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) 
{ 
   #div{
     border: 3px solid #fff; /* cover the edges with the border*/
     margin: 0 -3px 0 -3px; /* and take back the extra pixels the border adds*/
     -webkit-border-image: url(texture.gif) 4 repeat ; /*add the texture to the border*/
   }
}
</style>