2011-10-19 2 views
24

Utilizzo Twitter Bootstrap per personalizzare un sito Web ottimizzato per iPad e sto riscontrando un bug interessante in Mobile Safari su iOS5.Barra di posizione fissa selezionabile solo una volta in Mobile Safari su iOS5

Dopo aver toccato un collegamento di ancoraggio nella barra di posizione fissa, mi porta correttamente all'ancora. Tuttavia, non riesco quindi a fare clic su altri collegamenti nella barra di navigazione fino a quando non ho fatto scorrere la pagina.

Il problema sembra essere in Bootstrap per sé, in quanto il sito Bootstrap ha lo stesso problema: http://twitter.github.com/bootstrap/

Qualche suggerimento su come ovviare a questo?


Il codice di seguito riproduce il problema. Nota se fai clic su "Test JS" o "Prova jQuery" (due diversi tipi di scorrimento, JS dritto o basato su jQuery) non potrai più fare clic su di nuovo fino a quando non muovi la pagina manualmente.

Ecco il codice di base demo (.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> 
+1

Ho lo stesso problema. Nessuna soluzione finora. – Stuiterbal

+0

Ho un problema simile. Chiunque? – emilolsson

risposta

-2

ho avuto lo stesso problema. Devi applicare uno padding-top almeno 40px sul tuo tag <body> o qualsiasi elemento appena prima della barra (barra di navigazione o barra superiore).

33

Sento il tuo dolore. Ho passato almeno 6 ore a cercare di capirlo. Ma l'ho fatto, almeno una soluzione dolce che ha funzionato per me.

Ho un'intestazione fissa con la navigazione al suo interno come molte intestazioni hanno. Il corpo/html scorre verso il basso al di sotto di esso. (tipico)

Dopo aver fatto clic su un pulsante di navigazione, la pagina scorre ed effettivamente uccide i miei pulsanti finché non scorrono fisicamente di nuovo il mio corpo con il dito. Questo in qualche modo rende i miei pulsanti nuovamente cliccabili. Ho provato di tutto e nessuno sembrava averlo risolto, né condiviso i risultati.

html :: Alla fine del mio contenitore div, ho aggiunto un div vuoto, senza altezza/larghezza

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

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

js :: Poco prima l'animazione di scorrimento, do l'altezza div di 200 px.

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

immediatamente completo dell'animazione, prendo l'altezza via

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

che è. Dolce magia hack. Spero che aiuti. Se si desidera un esempio funzionante, http://ryanore.com Attualmente sono in corso, quindi normalmente non guiderò alcun collegamento ad esso, ma hey è per una buona causa.

+1

Va notato che quel numero "200px" era arbitrario e sembrava funzionare bene nella mia situazione. Potrebbe essere necessario manomettere il valore finché non si ottiene qualcosa che funzioni. –

+0

FWIW, questo non ha funzionato per me. Un bug così fastidioso! – weotch

+0

Ha funzionato per me, la migliore soluzione là fuori. Grazie! – Mac

2

C'è una soluzione qui: http://xybrary.appspot.com/.

Non sto dicendo che questo è il migliore ma non è stato in grado di trovare qualcos'altro di meglio. Ho provato la soluzione di @Ryan Ore visitando il suo sito Web su iOS 5.1 e il suo problema non è stato risolto.

Fondamentalmente, sono stati creati due navbar fissi, il primo con posizione fissa e uno z-index più grande, il secondo, il posizionamento assoluto e uno z-index inferiore (ovviamente, una diversa classe CSS). Quindi l'originale e il duplicato sono sovrapposti l'uno sull'altro.

+0

Sono contento che tu abbia postato questo in realtà, non sono sicuro del motivo per cui il mio non funziona più neanche per me. Penso che possa aver inavvertitamente preso il mio codice. So che funzionava benissimo per un po 'però. riporterà. –

+0

Sì, in realtà ho ingannato il mio CSS e ora funziona di nuovo. Non sono sicuro del motivo per cui non sta funzionando per te, ma sono felice che tu abbia trovato un'altra soluzione. Non ho provato ma hey, se funziona è fantastico. –

+0

Grazie per averci informati di @Ryan Ore. Sono abbastanza sicuro che le persone possano ora studiare il tuo approccio e portarlo a termine, darò un'occhiata a me stesso e sono curioso. – Chris