Google Chrome вставляет скрытую ошибку в Windows, а не в Mac: лучшее решение? - PullRequest
Новая
       15

Google Chrome вставляет скрытую ошибку в Windows, а не в Mac: лучшее решение?

6 голосов
/ 29 июля 2010

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

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

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

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

Две части этого хака. Небольшой Javascript (плагин jQuery + jQuery.client): 

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
  }

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

Кто-нибудь придумал лучший способ для этого?

1 Ответ

2 голосов
/ 04 ноября 2010

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

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