Bonjour,

j'ai un pb de compatibilité sur une application de flashcards.

Tout fonctionne sous Firefox, Chrome et Edge.

Sous IE11, la rotation progressive des cartes ne s'effectue pas.

J'ai tout mis dans codepen :

https://codepen.io/Bruno95/pen/ERZWrO

Je suppose un pb lié au CSS : "transition: transform 2s ease;" qui s'applique à deux balises <DIV>

Merci d'avance à celles et ceux qui voudront bien prendre quelques instants pour examiner ce code et me donner quelques pistes pour règler le pb.

-
Edité par BrunoDéchamps 10 juin 2018 à 10:31:23

Bonjour  BrunoDéchamps

Pour moi, c'est un bug  sur backface-visibility : hidden sur ie11.

Exemple  :

https://codepen.io/Zonecss/pen/YvNjyx

-
Edité par AliasDmc 10 juin 2018 à 11:16:26

Bonjour,

merci AliasDMC, je viens d'en arriver à la même conclusion : apparemment c'est un bug sur backface-visibility : hidden sous IE 11 et à priori sous Windows 10 ==> il semblerait que cela fonctionne sous Windows 7, mais je n'ai pas de machine sous la main avec cet OS (je testerai cela mardi).

Je pensais contourner le pb en supprimant cette ligne css et en jouant sur la propriété z-index. Mais il faut synchroniser la rotation et le changement de z-index. Cela marche sous Firefox et Chrome, mais pas sur IE 11 et Edge

voir le nouveau code :

https://codepen.io/Bruno95/pen/dKNgPb

Le code que tu me proposes fonctionne parfaitement. Le hack pour IE 11 n'était pas évident à trouver. Ta solution avec les nouvelles fonctions en JS est intéressante, mais j'ai une question : pourquoi est-ce préférable d'opérer un changement de classe plutôt que de jouer sur les propriétés CSS ? Plus rapide ? Plus propre ?

En tout cas mille mercis

PS :

Ben non finalement cela ne fonctionne pas.

Le code fourni par AliasDMC fonctionne sous IE 11 dans codepen mais quand je récupère le code en dehors ==> le pb sous IE 11 réapparaît.

Il y a de quoi rendre perplexe !!!

-
Edité par BrunoDéchamps 10 juin 2018 à 15:58:12

Bonjour  BrunoDéchamps,

J'ai testé en local sur une page hors codepen cela fonctionne.

Tu as peux être un pb de cache Navigateur, ou tu as oublié de reporter des propriétés CSS!

Concernant la classe :

Si tu n'as pas de valeur dynamique à mettre (genre calculer une dimension, appliquer un calcul a une valeur de propriété Css), il est préférable d'utiliser une class car tu as tout au même endroit : dans la css et non dans la css et le js. Tu verras que pour debuger aussi c'est pratique.

-
Edité par AliasDmc 10 juin 2018 à 16:54:23

Bonjour aliasDMC,

je te confirme que ton code fonctionne parfaitement, j'avais bêtement oublié de changer la référence à la feuille de style dans le fichier HTML.

J'ai pu tester au boulot mon code initial sur une machine sous windows 7 et IE 11 ==> le bug backface-visibility : hidden ne se produit pas.

il est donc bien spécifique au couple IE11 / Windows 10.

Merci encore pour tes réponses et leur efficacité.