barra de navegación de posición fija solo se puede hacer clic una vez en Mobile Safari en iOS5

Estoy usando Twitter Bootstrap para diseñar un sitio web optimizado para iPad y estoy corriendo contra un error interesante en Mobile Safari en iOS5.barra de navegación de posición fija solo se puede hacer clic una vez en Mobile Safari en iOS5

Después de tocar en un enlace de anclaje en la barra de navegación de posición fija, me lleva correctamente a ese anclaje. Sin embargo, no puedo hacer clic en ningún otro enlace en la barra de navegación hasta después de haber desplazado la página.

El problema parece ser en sí mismo Bootstrap, ya que el sitio Bootstrap tiene el mismo problema: http://twitter.github.com/bootstrap/

Cualquier sugerencia sobre cómo solucionar esto?

El código siguiente reproduce el problema. Tenga en cuenta que si hace clic en "Test JS" o "Test jQuery" (dos tipos diferentes de desplazamiento, JS directo o basado en jQuery) no podrá hacer clic nuevamente hasta que haya movido la página manualmente.

Aquí es el código básico de demostración (.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>

Fuente

2011-10-19 Joshua Clanton

Estoy teniendo el mismo problema. No hay solución hasta el momento. – Stuiterbal

Tengo un problema similar. ¿Nadie? – emilolsson

-2

que tenía el mismo problema. Debe aplicar un padding-top al menos 40px en su etiqueta <body> o cualquier elemento justo antes de su barra (barra de navegación o barra superior).

Fuente

2011-12-29 19:53:13 Pabluez

Siento tu dolor. Pasé al menos 6 horas tratando de resolver esto. Pero lo hice, al menos una dulce solución que funcionó para mí.

Tengo un encabezado fijo con navegación como muchos encabezados. El cuerpo/html se desplaza hacia abajo debajo de él. (típico)

Después de hacer clic en un botón de navegación, la página se desplaza y efectivamente mata mis botones hasta que desplazo físicamente mi cuerpo nuevamente con el dedo. Esto de alguna manera hace que mis botones se vuelvan a hacer clic de nuevo. Intenté todo y nadie parecía haberlo resuelto, o no compartí los resultados.

HTML :: Al final de mi div contenedor, añadí un div vacío, sin altura/anchura

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

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

JS :: Justo antes de la animación de desplazamiento, doy la altura div de 200px.

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

inmediatamente completa de la animación, tomo la altura de distancia

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

Eso es todo. Dulce truco mágico. Espero que eso ayude. Si quiere un ejemplo de trabajo, http://ryanore.com Actualmente estoy en progreso, así que normalmente no conduciría ningún enlace, pero bueno, es por una buena causa.

Fuente

2012-04-05 14:11:03

Cabe señalar que ese número '200px' era arbitrario y parecía funcionar bien en mi situación. Es posible que tengas que jugar con el valor hasta que arregles algo que funcione. –

FWIW, esto no funcionó para mí. ¡Un error tan molesto! – weotch

Funcionó para mí, mejor solución por ahí. ¡Gracias! – Mac

Hay una solución aquí: http://xybrary.appspot.com/.

No estoy diciendo que este sea el mejor pero que no haya podido encontrar algo mejor. Han intentado la solución de @Ryan Ore visitando su sitio web en un iOS 5.1 y su problema no está solucionado en absoluto.

Básicamente, se han creado dos barras de navegación fijas, la primera con una posición fija y un índice z mayor, la segunda posición absoluta y un índice z más bajo (por supuesto, diferentes clases de CSS). Entonces el original y el duplicado se superponen uno encima del otro.

Fuente

2012-06-22 12:45:41 Chris

Me alegro de que hayas publicado esto en realidad, no estoy seguro de por qué el mío tampoco funciona para mí. Creo que puedo haber equivocado inadvertidamente mi código. Sin embargo, sé que estuvo funcionando bien por un tiempo. informará de nuevo. –

Sí, en realidad me equivoqué con mi CSS y ahora estoy trabajando de nuevo. No estoy seguro de por qué no funciona para usted, pero me alegra que haya encontrado otra solución. No lo he intentado, pero bueno, si funciona, eso es increíble. –

Gracias por hacernos saber @Ryan Ore. Estoy bastante seguro de que la gente ahora puede estudiar su enfoque y terminarlo, voy a echar un vistazo a mí mismo y tengo curiosidad. – Chris

barra de navegación de posición fija solo se puede hacer clic una vez en Mobile Safari en iOS5

Respuesta

Cuestiones relacionadas