Les boutons Bootstrap restnt bloqués sur les appareils mobiles

Chaque fois que je clique sur un bouton avec mon téléphone portable (Android) sur un bouton avec mon appareil mobile (android) mais que le bouton devient bizarre comme si la souris était toujours terminée et qu’il ne se relâchait pas avant d’avoir cliqué sur un autre élément. Ce n’est pas la classe active appliquée à un élément. Voici à quoi ressemble le bouton avant de cliquer

Voici à quoi ressemble le bouton après avoir cliqué sur remarquer l'ombrage et l'arrière-plan

C’est subtil mais très ennuyant, surtout quand j’essaie d’appliquer des styles au bouton, ils n’apparaissent pas avant que je clique sur un élément différent.

Essayez d’aller sur http://twitter.github.com/bootstrap/base-css.html#buttons sur un appareil mobile et cliquez sur un bouton pour voir ce que je veux dire.

J’ai essayé de déclencher toutes sortes d’événements avec jQuery mais rien n’a fonctionné, c’est un extrait que j’ai à la fin de mon javascript.

$(document).on('tapclick', '.btn', function() { $(this).blur(); $(this).sortinggger('mouseup'); });

et essayé de passer outre les styles css en vol stationnaire

 .btn a:hover,.btn a:link,.btn a:visited,.btn a:active{ text-decoration: none !important; cursor: default !important; background-color: transparent !important; background-image: none !important; }

J’ai résolu ce problème en ajoutant une classe au bouton de l’événement touchend, puis en remplaçant la position d’arrière-plan d’amorçage par défaut.

javascript:

 $("button").on("touchstart", function(){ $(this).removeClass("mobileHoverFix"); }); $("button").on("touchend", function(){ $(this).addClass("mobileHoverFix"); });

css:

 .mobileHoverFix:hover, .mobileHoverFix.hover{ background-position: 0 0px; }

Si vous ne faites que développer pour mobile, vous pouvez simplement remplacer le css de survol, par exemple:

 .btn:hover { background-color: inherit; }