Transform Css non fonctionnel sur mozilla

Bonjour,

J'ai fait une animation js avec des propriétés css.

Tout fonctionne comme je le souhaite sous Chrome et IE cependant le rendu n'est pas du tout le même sous Firefox.

J'ai essayé de rajouter "-moz-transform" mais pas de changement

J'ai mis le code sous codepen pour que ce soit plus simple

https://codepen.io/anon/pen/KGeKNY



Avez vous une idée d'où peut venir le problème (mon mozilla est à jour)

Merci pour vos retours

si tu as un rendu, ce serait sympa...

Eventuellement:
- tu joues avec des marges négatives, c'est potentiellement problématique;
- regarde du côté du padding-top de body

Salut,

Si ça marche sur IE et Chrome dans ce cas contente toi de bosser pour ces deux navigateurs et le tour est joué ;).

Citation:

---

Envoyé par javatwister

si tu as un rendu, ce serait sympa...

Eventuellement:
- tu joues avec des marges négatives, c'est potentiellement problématique;
- regarde du côté du padding-top de body

---

D'où le lien codepen, étant une animation je ne peut mettre de capture d'écrans

Citation:

---

Envoyé par Mr Ananas

Salut,

Si ça marche sur IE et Chrome dans ce cas contente toi de bosser pour ces deux navigateurs et le tour est joué ;).

---

Ce n'est pas vraiment la réponse que j'attendais :)

Bonjour,

• supprime dans ton code toutes les références à perspective(0), par exemple

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

var modification = [{ "transform": "perspective(400px) rotateY(-45deg)", "width": "150px" }, { "transform": "perspective(400px) rotateY(45deg)", "width": "150px" }, { "transform": "rotateY(0deg)", "width": "1050px" } ];

---

• factorise ce qui peut l'être, comme transition-duration: 3s.

• tu pourrais également gérer cela via des classes, cela me semble plus judicieux.

c'était exactement le le problème de perspective 0;
Merci bcp !