Bug Firefox avec transition

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Bug Firefox avec transition

Message par Lenya le Lun 21 Juil 2014 - 5:01

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 ♥


Dernière édition par Lenya le Lun 21 Juil 2014 - 19:26, édité 1 fois

Lenya
*

Féminin
Messages : 44
Inscrit(e) le : 23/07/2008

http://darkestdreams.chocoforum.com/
Lenya a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bug Firefox avec transition

Message par Neptunia le Lun 21 Juil 2014 - 5:38

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

Neptunia
+ Hyperactif +

Féminin
Messages : 11004
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bug Firefox avec transition

Message par Lenya le Lun 21 Juil 2014 - 6:09

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

Lenya
*

Féminin
Messages : 44
Inscrit(e) le : 23/07/2008

http://darkestdreams.chocoforum.com/
Lenya a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bug Firefox avec transition

Message par Self le Lun 21 Juil 2014 - 15:50

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

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bug Firefox avec transition

Message par Lenya le Lun 21 Juil 2014 - 16:59

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.

Lenya
*

Féminin
Messages : 44
Inscrit(e) le : 23/07/2008

http://darkestdreams.chocoforum.com/
Lenya a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bug Firefox avec transition

Message par Self le Lun 21 Juil 2014 - 19:00

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

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bug Firefox avec transition

Message par Lenya le Lun 21 Juil 2014 - 19:26

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 ♥

Lenya
*

Féminin
Messages : 44
Inscrit(e) le : 23/07/2008

http://darkestdreams.chocoforum.com/
Lenya a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum