Discussion :

[Demky]

Bonjour;

J'ai essayé de trouver de l'aide sur Stackoverflow mais je n'ai pas trouvé de réponse.

Je mets le lien pour ceux qui parlent anglais car j'ai essayé de bien la documenter avec des gifs et j'ai cité plusieurs liens :

https://stackoverflow.com/questions/...-rotatey180deg

Mon problème :
J'ai fait une carte qui peut se retourner quand on met la souris dessus :



Le problème, comme on le voit sur le gif, c'est que dès que j'utilise le code css pour changer l'opacité du drapeau au dos de la carte

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
.changeOpacity {
  opacity: 0.3;
}

Il y a un délai de +/-1 seconde lors de l'affichage de la face arrière de la carte (et cela que sous Chrome; tout marche bien sous Firefox)

/!\ Le délai n'est présent que la premiere fois qu'on retourne la carte; il faut recharger la page (f5) pour pouvoir à nouveau le reproduire.

Voici un bac à sable avec le problème : https://codepen.io/Demky/pen/JjPOEgW

Vous remarquerez que le problème n'a pas lieu que pour l'opacité... si j'essaie de donner une position à du texte sur le dos de la carte, le même problème se produit également...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

J'ai même essayé sur l'exemple de w3school et il suffit de rajouter opacity:0.3; dans le css de .flip-card-back pour que le même problème ai lieu...



Y-a-t'il un bug dans l'internet ?


Une idée de comment corriger le problème (changement d'opacité et positionnement du texte sur le dos de la carte) ?

Dites moi si je peux apporter des précisions

Merci