Los anclajes pierden capacidad de clics después de desplazarse en iOS Safari

Usando esto para recoger los clics:

$("nav li a").click(function(event) { event.preventDefault(); target = $(this).attr("href").replace('#', ''); goToByScroll(target); }); 

Y esta es la function de desplazamiento:

 function goToByScroll(id) { $('html, body').animate({ scrollTop: $("#"+id).offset().top - totalHeight }, 'slow'); } 

El primer clic funciona pero después de eso los enlaces no se pueden hacer clic / activo a less que la página se desplace manualmente. ¿Algunas ideas?

Bajo nuevas investigaciones con un hombre iOS, descubrimos que es un error en Safari en iOS5.

Probé esto;

 // $('html,body').animate({ scrollTop: scrollto + 'px' }, 'slow') window.scroll(0,0); 

Y vio que en realidad dibujaba el encabezado fijo más abajo de la pantalla. Con el clic funciona.

Así que intercambié el código, y aunque dibujó correctamente el encabezado en la parte superior, el área de clic activo estaba todavía más abajo de la página, aunque era invisible, se podía hacer clic.

Parece que lo han resuelto probando en iOS6.

Agoté todo tipo de manipulación de CSS y DOM, eliminando y reinsertando un nuevo área de encabezado … nada funciona.

Así que estoy 99% seguro de publicar esto en LA RESPUESTA. jajaja Aunque me doy count de que eso no te ayuda.

Hay una serie de factores que podrían estar en juego aquí, la mayoría no implica el código que ha vinculado. Para que el clic no funcione:

  1. El evento de clic se está borrando.
  2. El elemento al que está intentando hacer clic está cubierto por otro elemento (probablemente transparente)
  3. El área de su elemento que se puede hacer clic está desplazada o malformada.

Para la primera posibilidad de ser el problema, su elemento debería permanecer inalcanzable hasta que se actualice o hasta que se vuelva a crear el controller de clics. Compruebe que el controller de clic no se esté construyendo más de una vez. Puede hacerlo configurando un punto de interrupción o una statement de alerta / console en el punto de su llamada a $(element).click(function() { ... }) .

Para la segunda posibilidad de ser el problema, otro elemento debería estar presente en la parte superior de su elemento seleccionable. Esto se puede verificar mediante el uso de un browser o una extensión de browser que le permite hacer clic con el button derecho en un elemento y inspeccionarlo. Si el elemento que se inspecciona no es su elemento seleccionable, es probable que sea el problema.

Para que la tercera posibilidad sea el problema, debería verificar la position, el tamaño y la forma del elemento seleccionable mientras que no se puede hacer clic. Use su browser o la extensión del browser para seleccionar y resaltar el elemento en la página. Mire dónde se muestra, qué dimensiones tiene, a qué se evalúa el z-index , qué properties de visualización tiene ( display: inline es notorio por causar problemas con la posibilidad de hacer clic), y si es incluso "en realidad" en el estado actual window de visualización

En resumen, el código que ha publicado dice poco a poco sobre lo que podría estar sucediendo, por lo que necesita hacer más debugging o proporcionar más código.