Ciao, non so se sia un problema di css o javascript quindi nel caso spostate la discussione dove ritenete pi� opportuno.

Ho fatto delle flip card seguendo degli esempi che ho trovato. In chrome funziona perfettamente mentre in firefox c'� un bug che non riesco a risolvere:

Quando clicco su una flip card il content del front (un h2) si vede anche nel back ma al rovescio mentre in chrome non succede.

La cosa strana � che ho ricreato la flip card su codepen in firefox ma funziona bene. In pratica succede solo sul mio file in locale. Di seguito il codice:

HTML
codice:
<div class="flipper">
     <div class="card">
         <div class="front transformParameter">
             <div class="overlay">
                 <h2>Lorem Ipsum</h2>
             </div>
         </div>
         <div class="back transformParameter">
              <h3>Lorem Ispum</h3>
              <p>Lorem Ipsum</p>
              <p class="date"><span class="glyphicon glyphicon-calendar"></span>Lorem</p>
         </div>
     </div>
</div>
CSS
codice:
.flipper {
  width: 33.33%;
  min-width: 250px;
  height: 250px;
  position: relative;
    -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
}

.front, .back {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
// first child perch� ne ho diversi di flip card ma per brevit� ne metto uno qui
.work .flipper:first-child .front {
  background-image: url("image_part_001.jpg");
  background-size: 100% 100%;
  }
.work .flipper:first-child .back {background-color: rgba(170, 57, 57, 1);}

.overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .4);
}

.front {
  z-index: 2;
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

.back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  padding: 25px;
}

.work .front h2 {
  color: ghostwhite;
  text-align: center;
  font-size: 2rem;
  position: absolute;
  top: 45%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.work .back h3 {
  color: ghostwhite;
  margin: 0;
  font-size: 1.6rem;
  margin-bottom: 15px;
  text-align: center;
}

.work .back .date {
  color: ghostwhite;
  font-size: 1rem;
  position: absolute;
  bottom: 0px;
}

.work .back p {
  color: ghostwhite;
  font-size: 1.2rem;
}
JAVASCRIPT
codice:
$(function(){
    $(".flipper").on("click", function(){
      $(this).find(".transformParameter").css({
        "-webkit-transition": "-webkit-transform 1.2s",
        "-moz-transition": "-moz-transform 1.2s",
        "-o-transition": "-o-transform 1.2s",
        "transition": "transform 1.2s"
      })
      $(this).find(".front").css({
        "-webkit-transform": "rotateY(180deg)",
        "transform": "rotateY(180deg)"
      })
      $(this).find(".back").css({
        "-webkit-transform": "rotateY(0deg)",
        "transform": "rotateY(0deg)"
      })
    })
    $(".flipper").on("mouseleave", function(){
      $(this).find(".transformParameter").css({
        "-webkit-transition": "-webkit-transform 1.2s",
        "-moz-transition": "-moz-transform 1.2s",
        "-o-transition": "-o-transform 1.2s",
        "transition": "transform 1.2s"
      })
      $(this).find(".front").css({
        "-webkit-transform": "rotateY(0deg)",
        "transform": "rotateY(0deg)"
      })
      $(this).find(".back").css({
        "-webkit-transform": "rotateY(180deg)",
        "transform": "rotateY(180deg)"
      })
    })
  })
E' da ieri che cerco di capire il perch� ma ancora non ho capito.. all'inizio pensavo fosse dovuto al mancato vendor -moz in alcune propriet� (backface-visibility, transform-style, perspective) ma ho visto che dalla versione 16 di mozilla questo non � pi� richiesto.
Ho pensato potesse essere dovuto alla propriet� z-index: 2 della classe .front e in effetti se nel javascript la reimposto a 0, il bug sparisce (nel senso che l'h2 non si vede pi� nel back) ma lo fa solo quando il back � perfettamente girato quindi per tutta la rotazione rimane e l'effetto � brutto..

Invoco il vostro aiuto.