Google Chrome вставка-тень ошибка в Windows, а не на Mac: лучше обходной путь?

Question

Это все еще актуально в Chrome 5.0.375.125, который является последней версией Windows на момент написания этой статьи.

ошибка отслеживается здесь: http://code.google.com/p/chromium/issues/detail?id=25334

Итак, проблема в том, что если вы на Windows, или Linux, а кто-то использует врезку коробка-тень на элемент, который также имеет границы радиуса, вы получите ошибка - пограничный радиус сохранен, но вставка-тень вылетает из него, как будто это все еще квадратная коробка. Он работает так, как ожидалось, в Chrome на Mac OS X.

люди, использующие текстурированные фоны, не могут использовать этот хак, поскольку для этого требуется непрозрачный цвет границы. Он также работает только на меньшем радиусе.

Две части этого взлома. Немного (плагин JQuery + jQuery.client) Javascript:

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

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

Могу ли я принять душ сейчас? Этот хак заставляет меня чувствовать себя грубым.

Неужели кто-нибудь придумал лучшее обходное решение для этого?

Answer 1

Вы можете избавиться от части JS путем ориентации сафари через хак, так как для текстурированных фона вы можете использовать ту же текстуру для границы (сложно, но работает для некоторых текстур!):

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