Визуальный артефакт в Firefox, возможно, из-за элемента css-transform или :: after? - PullRequest
Новая
       28

Визуальный артефакт в Firefox, возможно, из-за элемента css-transform или :: after?

5 голосов
/ 18 августа 2011

Я пытаюсь дать элементу карты тень, которая выглядит так, как будто она снята со страницы.Я делаю это с помощью псевдоэлемента :: after, css-transform и тени блока.

Я использую Mac OSX, Chrome (последняя версия) и Firefox 5. Результаты

Comparison of browser rendering

Как вы можете видеть, в рендере Firefox есть странный похожий на границу артефакт.Цвет этого, похоже, связан с цветом фона тела - как вы можете видеть во втором примере с Firefox.

Для этого у меня есть следующий код:

HTML: 

<div class="card_container">
  <div class="card">
    <!-- Content //-->
  </div>
</div>

CSS: 

.card{
  padding: 5px;
  background-color: #fff;
  border: 1px solid #aaa;
  height: 375px;
  margin-bottom: 20px;
}

.card_container::after{
  content: "";
  width: 210px;
  height: 10px;
  -webkit-transform: rotate(2deg); 
  -moz-transform:    rotate(2deg);
  box-shadow: 3px 3px 3px #4a4a4a;
  background-color: #4a4a4a;
  position:absolute;
  bottom: 20px;
  right: 8px;
  z-index: -1;
}

Есть еще немного CSS, но я вполне уверен, что я играл достаточно, чтобы исключить что-либо еще.

Любые идеи, почемуэто происходит, если это зависит от платформы / браузера и / или какого-либо исправления?Спасибо за любую помощь!

1 Ответ

1 голос
/ 26 августа 2011

:after - сложный селектор: вы добавляете элемент HTML в свой документ, но не можете свободно манипулировать его положением.Я предлагаю изменить HTML следующим образом: 

<div class="card_container">
  <div class="card">
    <!-- Content //-->
  </div>
  <div class="shadow"></div>
</div>

Вы должны добавить «теневой» div для каждого используемого элемента карты, что может занять некоторое время.

Теперь для CSS: 

.card {
  padding: 5px;
  background-color: #fff;
  border: 1px solid #aaa;
  margin-bottom: 20px;
  height:100px; /* just for show, can be set to auto */
}

.card_container {
  width:210px;
  overflow-x:hidden; /* preventing the shadow from leaking out on the sides */
}

.shadow {
  width: 93%;
  height: 10px;
  /* rotation */
  transform:rotate(2deg);
  -moz-transform:rotate(2deg); /* Firefox */
  -webkit-transform:rotate(2deg); /* Safari and Chrome */
  /* shadow */
  box-shadow: 3px 3px 3px #4a4a4a;
  -moz-box-shadow: 3px 3px 3px #4a4a4a;
  -webkit-box-shadow: 3px 3px 3px #4a4a4a;
  background-color: #4a4a4a;
  border: 1px solid #4a4a4a;
  position: relative;
  bottom: 33px;
  left: 5px;
  z-index: -1;
}

Это решение не очень гибкое: вам нужно настроить теневой элемент, если вы измените ширину карты (чем шире тень, тем меньше вращение, например).

...