Flip Card in Firefox

[Floky]

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

<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

.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

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

[KillerWorm]

Ciao, ho provato in un vecchio Firefox (vers. 45.0) su Vista, copiando il codice da te postato e inserendolo in un documento HTML5. ma non noto il problema da te descritto; non riesco a riprodurlo, l'animazione sembra corretta e non vedo intestazioni capovolte.

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.

Sì, questo è strano. Stai usando lo stesso browser per confrontare le due situazioni?
Su codepen stai usando la stessa versione di jQuery e di eventuali altri framework/librerie che usi in locale?
Stai usando lo stesso doctype?

Fornisci eventuali altri dettagli riguardo il contesto, potrebbero tornare utili per poter riprodurre il problema.

A parte questo, fai attenzione ai commenti in CSS

// first child perch� ne ho diversi di flip card ma per brevit� ne metto uno qui

non vanno scritti col doppio slash // ma con la sintassi /* commento */.
In teoria quella tua riga non dovrebbe incidere sul problema perché risulta essere una regola non interpretabile e pertanto verrebbe saltata dall'interprete del browser, per come l'hai scritta qui, ma sempre meglio mantenere una sintassi corretta, non si sa mai.

[Floky]

Ciao KillerWorm, grazie per la risposta. Ho trovato l'inghippo:

Al div con classe overlay mancava la propriet� position: absolute; in questo modo ora funziona perfettamente come in chrome. Probabilmente chrome rimediava autonomamente alla mancanza, non saprei.

Il div con classe front (che � il parent di overlay) ha la backface nascosta quando viene ruotato di 180deg e PROBABILMENTE non essendo overlay perfettamente sovrapposto al genitore, in qualche modo non veniva nascoto ma veniva ribaltato (per questo lo vedevo capovoloto). Questa � la mia interpretazione dei fatti ma non essendo esperto potrei sbagliarmi.

A questo punto ti pongo la seguente domanda:

Come mai il div overlay non sono sufficienti le propriet� width: 100% e height: 100% per sovrapporsi al suo parent? senza l'absolute in pratica il div � traslato un pochino verso il basso

Screenshot.jpg

Si hai ragione non so perch� ho messo le doppie slash.. dov'era permesso? in HTML?

PS: Perchè il forum non accetta le lettere accentate? è fastidioso leggere quelle sostituzioni...

[KillerWorm]

Bene, mi fa piacere intanto che tu sia riuscito a risolvere il problema in oggetto.

Riguardo questo:

Come mai il div overlay non sono sufficienti le propriet� width: 100% e height: 100% per sovrapporsi al suo parent? senza l'absolute in pratica il div � traslato un pochino verso il basso

In teoria sì, dal momento che il div non dovrebbe risultare spostato in quel modo a meno che non gli venga impostata qualche altra specifica proprietà; ma nella realtà dei fatti quello spostamento è creato dal margin-top dell'elemento h2 contenuto proprio in quel div. Per capire il perché di tale comportamento (che in effetti sembrerebbe avere poco senso) bisognerebbe chiederlo a chi ha stabilito tali specifiche. Posso solo ipotizzare che si tratti di un fattore legato al flusso dei contenuti; per cui, impostando position:absolute, viene in qualche modo rotto questo legame, come tu stesso hai potuto verificare.

Puoi risolvere comunque in vari modi, uno tra questi è quello di impostare overflow:auto sull'elemento padre (nel tuo caso, il div#overlay che ha quello spostamento inconsueto), ma personalmente non so dirti di più.

Si hai ragione non so perch� ho messo le doppie slash.. dov'era permesso? in HTML?

In vari linguaggi tra cui JavaScript che accetta entrambe le forme (// e /* */), mentre in HTML si usa <!-- -->. Ad ogni modo in CSS è consentito solo il doppio slash.

PS: Perchè il forum non accetta le lettere accentate? è fastidioso leggere quelle sostituzioni...

Una storia lunga.. problemi irrisolti da diverso tempo dopo il trasferimento di server della piattaforma.. c'erano diverse discussioni a riguardo in offtopic.. sembra che ormai ci si debba fare l'abitudine a leggere i geroglifici.