web-dev-qa-db-fra.com

Barre de navigation à position fixe cliquable une seule fois dans Mobile Safari sur iOS5

J'utilise Twitter Bootstrap pour concevoir un site Web optimisé pour iPad et je rencontre un bogue intéressant dans Mobile Safari sur iOS5.

Après avoir tapé sur un lien d'ancrage dans la barre de navigation à position fixe, il m'emmène correctement à cette ancre. Cependant, je ne peux alors cliquer sur aucun autre lien dans la barre de navigation avant d'avoir fait défiler la page.

Le problème semble être dans Bootstrap lui-même, car le site Bootstrap a le même problème: http://Twitter.github.com/ bootstrap /

Avez-vous des suggestions pour contourner ce problème?

Le code ci-dessous reproduit le problème. Notez que si vous cliquez sur "Test JS" ou "Test jQuery" (deux types différents de défilement, directement JS ou basé sur jQuery), vous ne pourrez pas cliquer à nouveau avant d'avoir déplacé manuellement la page.

Voici le code de démonstration de base (.jsp):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <style type="text/css">
            #testDiv {
                position: fixed;
                bottom: 0;
                right: 0;
                background: gray;
                padding: 20px;
            }
            #jsDiv,
            #jQueryDiv {
                width: 200px;
                display: block;
                height: 40px;
                background-color: red;
            }
            #jQueryDiv {
                background-color: yellow;
            }
        </style>
        <script type="text/javascript">
            function testScroll() {
                alert("JS");
                scroll(0, 5000);
            }
            function testjqScroll() {
                alert("JQuery");
                $(window).scrollTop(500);
            }
        </script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
    </head>
<body>
    <%for (int i = 0; i < 500; i++) {%>
    Line <%=i%><BR/>
    <%}%>
    Bottom
    <div id=testDiv>
        <a id="jsDiv" href="#" onclick="testScroll();return false;">Test JS</a>
        <a id="jQueryDiv" href="#" onclick="testjqScroll();return false;">Test jQuery</a>
    </div>
</body>
</html>
mobile-safariios5css-positiontwitter-bootstrap
25
Joshua Clanton

Je ressens ta douleur. J'ai passé au moins 6 heures à essayer de comprendre celui-ci. Mais je l'ai fait, au moins une solution de contournement douce qui a fonctionné pour moi.

J'ai un en-tête fixe avec navigation comme beaucoup d'en-têtes. Le corps/html défile vers le bas en dessous. (typique)

Après avoir cliqué sur un bouton de navigation, la page défile et tue efficacement mes boutons jusqu'à ce que je fasse à nouveau défiler physiquement mon corps avec mon doigt. Cela rend en quelque sorte mes boutons cliquables à nouveau. J'ai tout essayé et personne ne semblait l'avoir résolu, ou n'a pas partagé les résultats.

html :: À la fin de mon div conteneur, j'ai ajouté un div vide, sans hauteur/largeur

   <div id="device"></div>

</div> <!--! end of #container -->

js :: Juste avant l'animation de défilement, je donne la hauteur div de 200px.

$ ('# device'). css ('height', '200px');

immédiatement après avoir terminé l'animation, je prends la hauteur

$ ('# périphérique'). css ('hauteur', '0px'); 

C'est ça. Douce magie de piratage. J'espère que ça aide. Si vous voulez un exemple de travail, http://ryanore.com Actuellement, je suis en cours, donc je ne conduirais normalement aucun lien vers celui-ci, mais bon c'est pour une bonne cause.

33
Ryan Ore

Il existe une solution ici: http://xybrary.appspot.com/ .

Je ne dis pas que c'est le meilleur mais je n'ai pas pu trouver autre chose de mieux. J'ai essayé la solution de @Ryan Ore en visitant son site Web sur un iOS 5.1 et son problème n'est pas résolu du tout.

Fondamentalement, deux barres de navigation fixes ont été créées, la première avec un index z positionné fixe et un index z plus grand, la seconde, un positionnement absolu et un index z inférieur (bien sûr, une classe CSS différente). Ainsi, l'original et le duplicata sont superposés.

2
Chris