Chrome, bogue sur rotateY() et opacité / position de texte

**Demky** · 04/09/2019, 13h27

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

Nom : RMybY63.gif
Affichages : 251
Taille : 289,4 Ko

Nom : RMybY63.gif
Affichages : 251
Taille : 289,4 Ko

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

**NoSmoking** · 06/09/2019, 11h42

Bonjour,

ce bogue est visiblement lié aux différents « contextes d'empilement » et la manière dont chaque moteur de rendu, ici Blink, traite les informations à afficher.

Ton soucis peut se résoudre en plusieurs temps.
Sur la face verso il faut mettre

Code css :

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

1
2
3
.verso {
  backface-visibility: visible;  
}

pour la prise en compte de l'opacité.

Dans ce cas cela fonctionnera pour Chrome mais plus pour FireFox

Il faut maintenant mettre un z-index plus élevé sur l'élément « verso » que sur l'élément « recto ».

Code css :

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

1
2
3
4
5
6
7
.recto {
  z-index: 2;
}
.verso {
  z-index: 1;
  backface-visibility: visible;
}

Exemple complet :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d2002341">
<title>Flip carte</title>
<style>
html, body {
  margin: 1em;
  padding: 0;
  font: 1em/1.5 Verdana,sans-serif;
}
h1, h2, h3 {
  color: #069;
}
abbr {
  border-bottom: 1px dotted black;
  text-decoration: none;
  cursor: pointer;
}
footer {
  clear: both;
  font-size: .9em;
  font-style: italic;
  color: #AAA;
}
.flip-card {
  display: inline-block;
  width: 18em;
  height: 18em;
  margin: 1em;
  background-color: transparent;
  perspective: 1000px;
}
.flip-card img {
  width: 100%;
}
.flip-card h1 {
  color: inherit;
}
.flip-card p {
  text-align: center;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  box-shadow: 0 0 1em #888;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.flip-card-front {
  color: #000;
  background-color: #BBB;
  transform: rotateY(0deg);
}
.flip-card-back {
  color: #FFF;
  opacity: 0.3;
  background-color: #2980B9;
  transform: rotateY(180deg);
}
.recto {
  z-index: 2;
}
.verso {
  z-index: 1;
  backface-visibility: visible;
}
</style>
</head>
<body>
  <header>
    <h1>Card Flip</h1>
    <p>Traitement de l'anomalie, visible sous Chrome (<i><abbr title="Moteur de Rendu">MdR</abbr> Blink</i>), au premier survol, s'il y a une <code>opacity</code> sur la face arrière.<p>
  </header>
  <section>
    <h3>Survolez les images ci dessous.</h3>
    <div class="flip-card">
      <div class="flip-card-inner">
        <div class="flip-card-front">
          <img src="images/john-doe-avatar.png" alt="Avatar">
        </div>
        <div class="flip-card-back">
          <h1>John Doe</h1>
          <p>Architect & Engineer</p>
          <p>We love that guy</p>
        </div>
      </div>
      <p>Bug sous Chrome
    </div>
    <div class="flip-card">
      <div class="flip-card-inner">
        <div class="flip-card-front recto">
          <img src="images/john-doe-avatar.png" alt="Avatar">
        </div>
        <div class="flip-card-back verso">
          <h1>John Doe</h1>
          <p>Architect & Engineer</p>
          <p>We love that guy</p>
        </div>
      </div>
      <p>No Bug
    </div>
  </section>
  <footer>
    <ul>
      <li>Question sur DVP : https://www.developpez.net/forums/d2002341/webmasters-developpement-web/mise-page-css/
      <li>Code tiré de : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_flip_card
      <li>La méthode générale utilisée ici ne fonctionne pas pour IE.
    </ul>
  </footer>
</body>
</html>

Exemple en ligne : Card flip

Nota :si l'on veut également supporté IE il faut changer d'approche.

Voir l'exemple en ligne : Card flip support IE

Chrome, bogue sur rotateY() et opacité / position de texte

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager