Google Chrome recuadro error de cuadro de sombra en Windows, no en Mac: ¿mejor solución?

Question

Esto sigue vigente en Chrome 5.0.375.125, que es la versión más reciente de Windows en el momento de escribir este artículo.

Bug se realiza un seguimiento aquí: http://code.google.com/p/chromium/issues/detail?id=25334

Por lo tanto, el problema es que, si estás en Windows o Linux, y alguien utiliza inserción caja-sombra en un elemento que también tiene la frontera de radio, se obtiene una error: el radio del borde se conserva, pero la sombra de cuadro insertada se derrama, como si todavía fuera un recuadro cuadrado. Funciona como se esperaba en Chrome para Mac OS X.

personas que usan fondos con textura no pueden usar este truco porque requiere un color de borde opaco. También solo funciona realmente bien en un radio más pequeño.

Dos partes para este truco. Un poco (plugin de jQuery + jQuery.client) Javascript:

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

y 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 
    } 

¿Puedo tomar una ducha ahora? Este truco me hace sentir asqueroso.

¿Alguien ha encontrado una mejor solución para esto?

Answer 1

Usted puede deshacerse de la parte JS por la orientación de safari a través de un hack CSS, como para los fondos texturizados que puede utilizar la misma textura de la frontera (complicado pero funciona para algunas texturas!):

<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>