Firefox visual artifact, possibly due to css-transform or :: after element?

Question

I am trying to create a "card" element that looks like it was taken off the page. I do this using :: after pseudo-element, css-transform and window shadow.

I use Mac OSX, Chrome (latest version) and Firefox 5. Results

As you can see, there is a strange border artifact in firefox rendering. The color of this seems to be related to the background color of the body - as you can see in the second firefox example.

For this, I have the following code:

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

There is some more CSS there, but I'm sure I played enough to control something else.

Any ideas why this happens if it is a specific platform / browser and / or any fix? Thanks for any help!

Answer 1

: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;
}

: , (, , ).