Bonjour à tous,
dans mes essais de transitions et transformations CSS je suis tombé sur un problème étrange qui ne semble concerner que Webkit (au moins Chrome, de la version 19 à 21).
Plus précisément, je réalise un système de slides verticaux tout ce qu'il y a de plus basique. Les slides sont fils d'un conteneur, et ce conteneur est déplacé à l'aide de translateY ou translate3d avec une transition.
Cependant j'obtiens un comportement étrange lorsque la transition porte sur des valeurs en pourcentage ; elle semble s'"affoler" avant de finalement arriver à son état final, ce qui provoque des effets assez désagréables.
Aucun problème si j'utilise des valeurs en pixels ou une autre propriété (genre top), ou même si j'utilise Firefox (pour le moment il faut un navigateur supportant à la fois les transitions/transformations).
Vous pouvez visualiser le problème ici : http://jsfiddle.net/yHYDx/
Utilisez les flèches haute et basse pour faire défiler.
À noter que la première transition est toujours nickel, quand translate est absent donc, ce qui me fait penser à un problème d'interprétation des pourcentages.
Avez vous le même problème ? Si oui avez vous une idée pour améliorer ce comportement ?
Merci d'avance.
dans mes essais de transitions et transformations CSS je suis tombé sur un problème étrange qui ne semble concerner que Webkit (au moins Chrome, de la version 19 à 21).
Plus précisément, je réalise un système de slides verticaux tout ce qu'il y a de plus basique. Les slides sont fils d'un conteneur, et ce conteneur est déplacé à l'aide de translateY ou translate3d avec une transition.
Cependant j'obtiens un comportement étrange lorsque la transition porte sur des valeurs en pourcentage ; elle semble s'"affoler" avant de finalement arriver à son état final, ce qui provoque des effets assez désagréables.
Aucun problème si j'utilise des valeurs en pixels ou une autre propriété (genre top), ou même si j'utilise Firefox (pour le moment il faut un navigateur supportant à la fois les transitions/transformations).
Vous pouvez visualiser le problème ici : http://jsfiddle.net/yHYDx/
Utilisez les flèches haute et basse pour faire défiler.
À noter que la première transition est toujours nickel, quand translate est absent donc, ce qui me fait penser à un problème d'interprétation des pourcentages.
Avez vous le même problème ? Si oui avez vous une idée pour améliorer ce comportement ?
Merci d'avance.