Discussion :

[Kenkaio]

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

[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

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

[Kenkaio]

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

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

[NoSmoking]

Bonjour,

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

Code :

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

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.

[Kenkaio]

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