Bug Firefox avec transition

[Lenya]

Bonjour ~

Après avoir codé ma PA, je me rends compte que ma transition avec opacité - qui marche à merveille sur Chrome et sur les éditeurs d'HTML en ligne, sur Firefox - plante complètement sur Firefox une fois mise sur mon forum... J'ai essayé de bidouiller un peu, mais au final il n'y a rien à faire x.x

Pourriez-vous me dire d'où vient le bug ? é.è
L'HTML :

Code:

<div class="pa_transi_p">
          <img src="http://www.timtim.com/public/images/drawings/thumb/4410_skyline.jpg">
          <span class="pa_transi_t_p">NOM <br>†<br> Statut</span>
          </div>

Et le CSS

Code:

.pa_transi_p {
    margin-bottom: 10px;
    position: relative;
    transition: all 1s ease 0s;
  margin-top:-5px;
  float:left;
}

.pa_transi_p img {
    box-shadow: 0 0 6px #3c050b, 0 0 6px #3c050b;
    height: 45px;
    width: 80px;
}
.pa_transi_t_p {
    background: none repeat scroll 0 0 #c8c8c8;
    box-shadow: 0 0 6px #3c050b, 0 0 6px #3c050b;
    font-size: 13px;
    height: 45px;
    margin-left: -80px;
    opacity: 0;
    overflow: auto;
    position: absolute;
    text-align: center;
    top: 0;
    transition: opacity 2s ease 0s;
    width: 80px;
    z-index: 20;
    line-height:13px;
}
.pa_transi_p:hover .pa_transi_t_p {
    height: 45px;
    margin-left: -80px;
    opacity: 0.8;
    width: 80px;
}

Merci d'avance pour votre aide ♥

[Neptunia]

Bonjour ^^

La fonction transition est expérimentale.
Pour certains navigateurs il faut donc préfixer cette fonction comme ceci

Remplacer

Code:

transition: all 1s ease 0s;

par

Code:

-moz-transition: all 1s ease 0s;
-webkit-transition: all 1s ease 0s;
-o-transition: all 1s ease 0s;
transition: all 1s ease 0s;

La même manip doit être effectuée sur chacune de vos transitions.
La même remarque s'applique également sur box-shadow

[Lenya]

Oui, pour les autres compatibilités je les vérifierai par la suite, mais je prends note pour le shadow ~

Ceci dit, j'ai changé le préfixe, et cela continue de ne rien donner. Je l'ai également modifié pour le

Code:

transition: opacity 2s ease 0s;

Le problème ne vient manifestement pas de là, mais merci tout de même >.<

[Self]

Bonjour,

Essayez en remplaçant votre CSS par :

Code:

.pa_transi_p {
   margin-top: -5px;
   margin-bottom: 10px;
   float: left;
   position: relative;
   -webkit-transition-property: all;
   -moz-transition-property: all;
   -o-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 1s;
   -moz-transition-duration: 1s;
   -o-transition-duration: 1s;
   transition-duration: 1s;
}

.pa_transi_p img {
   width: 80px;
   height: 45px;
   -webkit-box-shadow: 0px 0px 6px #3c050b;
   -moz-box-shadow: 0px 0px 6px #3c050b;
   box-shadow: 0px 0px 6px #3c050b;
}

.pa_transi_t_p {
   width: 80px;
   height: 45px;
   position: absolute;
   top: 0;
   left: -80px;
   overflow: auto;
   background: none repeat scroll 0 0 #c8c8c8;
   opacity: 0;
   font-size: 13px;
   text-align: center;
   line-height: 13px;
   -webkit-box-shadow: 0px 0px 6px #3c050b;
   -moz-box-shadow: 0px 0px 6px #3c050b;
   box-shadow: 0px 0px 6px #3c050b;
   -webkit-transition-property: opacity;
   -moz-transition-property: opacity;
   -o-transition-property: opacity;
   transition-property: opacity;
   -webkit-transition-duration: 2s;
   -moz-transition-duration: 2s;
   -o-transition-duration: 2s;
   transition-duration: 2s;
}

.pa_transi_p img:hover .pa_transi_t_p {
   opacity: 0.8;
   -webkit-transition-property: opacity;
   -moz-transition-property: opacity;
   -o-transition-property: opacity;
   transition-property: opacity;
   -webkit-transition-duration: 2s;
   -moz-transition-duration: 2s;
   -o-transition-duration: 2s;
   transition-duration: 2s;
}

[Lenya]

Bonjour ^^

Merci pour la solution. Je viens de tester, mais... cette fois les images ne changent plus du tout. Ceci dit, contrairement à précédemment, le code apparaît au moins sur Firebug.

[Self]

Comme ceci ? :

Code:

.pa_transi_p {
  margin-top: -5px;
  margin-bottom: 10px;
  float: left;
  position: relative;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}

.pa_transi_p img {
  width: 80px;
  height: 45px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  -webkit-box-shadow: 0px 0px 6px #3c050b;
  -moz-box-shadow: 0px 0px 6px #3c050b;
  box-shadow: 0px 0px 6px #3c050b;
}

.pa_transi_t_p {
  width: 80px;
  height: 45px;
  position: absolute;
  top: 0;
  left: -80px;
  overflow: auto;
  background: none repeat scroll 0 0 #c8c8c8;
  opacity: 0;
  font-size: 13px;
  text-align: center;
  line-height: 13px;
  -webkit-box-shadow: 0px 0px 6px #3c050b;
  -moz-box-shadow: 0px 0px 6px #3c050b;
  box-shadow: 0px 0px 6px #3c050b;
}

.pa_transi_p:hover .pa_transi_t_p {
  opacity: 0.8;
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-duration: 2s;
  -moz-transition-duration: 2s;
  -o-transition-duration: 2s;
  transition-duration: 2s;
}

[Lenya]

J'ai un peu bidouillé entre les divers codes donnés, car le dernier décalait carrément le texte xD, et c'est bon !

Merci beaucoup pour ton aide ♥