Bug Animation

Vos requêtes concernant Mozilla Firefox, le navigateur Gecko alternatif, ne trouvèrent point de réponses lorsque vous cherchâtes ? Toute l'équipe Geckozone est prête à vous aider.

Modérateurs : myahoo, nico@nc, Mori, jpj

Répondre
Anksunico
Arias
Messages : 7
Inscription : 17 déc. 2013, 01:03

Bug Animation

Message par Anksunico »

Bonjour à tous,

J'ai trouvé un bug vraiment bizarre et impossible à corriger lorsque l'on utilise deux animations en même temps.
J'essaie de faire une balle qui rebondi et qui va de gauche à droite, mais l'animation "animationBalleY" s'arrête avant la fin, et la div devient invisible ou tronquée, et cela sans raison.
En supprimant l'animation "animationBalleX" l'animation "animationBalleY" fonctionne et si je supprimer l'animation "animationBalleY" l'animation "animationBalleX" fonctionne également.

Html :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Animation</title>
<link href="medias/test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="balleX">
<div class="balleY"></div>
</div>
</body>
</html>

Css :

.balleX { background: #f00; -moz-animation: animationBalleX 3s ease-out forwards; height: 50px; width: 50px; }
.balleY { background: #f00; -moz-animation: animationBalleY 3s ease-out forwards; height: 50px; width: 50px; }

@-moz-keyframes animationBalleX { 0% { -moz-transform: translateX(0px); } 100% { -moz-transform: translateX(428px); } }
@-moz-keyframes animationBalleY
{
0% { -moz-transform: translateY(0px); -moz-animation-timing-function: ease-in; }
10% { -moz-transform: translateY(580px); -moz-animation-timing-function: ease-out; }
20% { -moz-transform: translateY(413px); -moz-animation-timing-function: ease-in; }
30% { -moz-transform: translateY(580px); -moz-animation-timing-function: ease-out; }
38% { -moz-transform: translateY(524px); -moz-animation-timing-function: ease-in; }
46% { -moz-transform: translateY(580px); -moz-animation-timing-function: ease-out; }
52% { -moz-transform: translateY(560px); -moz-animation-timing-function: ease-in; }
58% { -moz-transform: translateY(580px); -moz-animation-timing-function: ease-out; }
62% { -moz-transform: translateY(575px); -moz-animation-timing-function: ease-in; }
66% { -moz-transform: translateY(580px); -moz-animation-timing-function: ease-out; }
100% { -moz-transform: translateY(580px); -moz-animation-timing-function: ease-out; }
}

Que se passe t'il ? Comment corriger ?

Merci d'avance.
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64; rv:26.0) Gecko/20100101 Firefox/26.0
Avatar de l’utilisateur
Abraxas
Animal mythique
Messages : 10180
Inscription : 28 juil. 2011, 14:06

Re: Bug Animation

Message par Abraxas »

Lien démo: http://jsfiddle.net/pgdM9/
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64; rv:26.0) Gecko/20100101 Firefox/26.0
Avatar de l’utilisateur
Abraxas
Animal mythique
Messages : 10180
Inscription : 28 juil. 2011, 14:06

Re: Bug Animation

Message par Abraxas »

Avec

Code : Tout sélectionner

<div class="balleX"></div>
<div class="balleY"></div>
ça va mieux non ?
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64; rv:26.0) Gecko/20100101 Firefox/26.0
Anksunico
Arias
Messages : 7
Inscription : 17 déc. 2013, 01:03

Re: Bug Animation

Message par Anksunico »

Merci Abraxas pour ta réponse et le jsfiddle.
On voit bien le bug avec ça justement, il n'y a aucune raison pour que le cube du bas disparaisse tout à coup...

Pour la modification de code, il faut que la div "balleY" soit à l'intérieur de "balleX" (code original), pour déplacer (X) ET faire rebondir (Y) la balle.
Le background "balleX" n'est la que pour l'exemple, il faudra le supprimer en production.

Je pense vraiment que c'est un bug de firefox, ça fonctionne très bien avec tous les autres navigateurs (en utilisant les balises propriétaires bien sûr...)
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36
Tsensei
Iguane
Messages : 715
Inscription : 08 nov. 2011, 19:48

Re: Bug Animation

Message par Tsensei »

Anksunico a écrit :Je pense vraiment que c'est un bug de firefox, ça fonctionne très bien avec tous les autres navigateurs (en utilisant les balises propriétaires bien sûr...)
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36
Qu'est-ce-que tu entends par là ?
Anksunico
Arias
Messages : 7
Inscription : 17 déc. 2013, 01:03

Re: Bug Animation

Message par Anksunico »

en utilisant les balises propriétaires : soit remplacer les -moz- par des -webkit- pour chrome, -o- pour opéra, etc...
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36
Avatar de l’utilisateur
Abraxas
Animal mythique
Messages : 10180
Inscription : 28 juil. 2011, 14:06

Re: Bug Animation

Message par Abraxas »

Il ne faut plus utiliser le préfixe -moz pour Firefox, toutes ces balises sont dépréfixées depuis Firefox 16 au moins (animation, @keyframes, transform etc).
Consulte le MDN pour le savoir: https://developer.mozilla.org/fr/

Sans le préfixe -moz, le comportement est différent, on voit un carré qui va de g. à d. et un 2nd qui va de haut en bas: http://jsfiddle.net/pgdM9/2/
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64; rv:26.0) Gecko/20100101 Firefox/26.0
Anksunico
Arias
Messages : 7
Inscription : 17 déc. 2013, 01:03

Re: Bug Animation

Message par Anksunico »

J'ai utilisé le préfixe -moz- juste pour faire des tests spécifiques firefox...

Mais le comportement est toujours le même, le deuxième carré qui tombe n'est pas sensé disparaître au milieu de l'animation...

Comment peut-on soumettre un bug à mozilla si personne ne voit ce qu'il se passe ?
Anksunico
Arias
Messages : 7
Inscription : 17 déc. 2013, 01:03

Re: Bug Animation

Message par Anksunico »

Quelqu'un pour m'aider ou avertir Mozilla de ce bug ?
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36
Avatar de l’utilisateur
Abraxas
Animal mythique
Messages : 10180
Inscription : 28 juil. 2011, 14:06

Re: Bug Animation

Message par Abraxas »

Je vais poster un rapport de bug.
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64; rv:26.0) Gecko/20100101 Firefox/26.0
Anksunico
Arias
Messages : 7
Inscription : 17 déc. 2013, 01:03

Re: Bug Animation

Message par Anksunico »

Merci Abraxas, peux-tu me donner le lien du rapport afin de voir si ils donnent une réponse ?
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36
Avatar de l’utilisateur
Abraxas
Animal mythique
Messages : 10180
Inscription : 28 juil. 2011, 14:06

Re: Bug Animation

Message par Abraxas »

https://bugzilla.mozilla.org/show_bug.cgi?id=959205
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64; rv:26.0) Gecko/20100101 Firefox/26.0
Avatar de l’utilisateur
Abraxas
Animal mythique
Messages : 10180
Inscription : 28 juil. 2011, 14:06

Re: Bug Animation

Message par Abraxas »

Pbm résolu dans FF29.
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64; rv:26.0) Gecko/20100101 Firefox/26.0
Anksunico
Arias
Messages : 7
Inscription : 17 déc. 2013, 01:03

Re: Bug Animation

Message par Anksunico »

OK, donc c'était bien un bug de firefox...

Merci Abraxas d'avoir rapporté le bug et de m'avoir informé sur la résolution de celui-ci...
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Bing [Bot], Google [Bot] et 16 invités