Bug de fin de transition dans jQTouch sur Android

logo JQTouchSous Android, l’utilisation de la transition CSS translateX (de webkit) pose problème. En effet la mise en œuvre de ce type de transition sous jQTouch génère un bug d’affichage.
La page sortante qui glisse vers la gauche réapparait un court instant lorsque l’animation se termine (elle revient à sa position initial avant d’aller définitivement s’installer plus loin).

pour pallier a ce bug il suffit de jouer avec les z-index : Dans la feuille CSS « jqtouch.css », ajoutez les z-index suivant.

.slide.in {
	z-index: 10;
	-webkit-animation-name: slideinfromright;
}

.slide.out {
	z-index: 0;
	-webkit-animation-name: slideouttoleft;
}

.slide.in.reverse {
	z-index: 10;
	-webkit-animation-name: slideinfromleft;
}

.slide.out.reverse {
	z-index: 0;
	-webkit-animation-name: slideouttoright;
}

Et le tour est joué!

Tagués avec : , , ,
Publié dans JavaScript - AJAX, Mobiles (Android - iPhone)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*