iOS 7 pase / click problema: no se activó ningún clic en algunos casos

Tengo una especie de "widget": una tabla de datos con algunas funciones completas como orderar, seleccionar filas y demás.

En algunos casos (colocación de widgets / anidamiento en DOM), los clics en sus filas no se activan en iOS 7 Safari.

Widget está utilizando jQuery 1.6.4

No puedo publicar un código de widget completo (y realmente no va a suceder esto;)), pero puedo networkingucir un escenario de reproducción al siguiente caso:

  1. Tabla html simple con algunas filas, dos columnas en cada una
  2. La primera columna contiene una "checkbox": div simple que normalmente se oculta y se vuelve visible, y luego se mantiene flotando la fila principal. La visibilidad se activa solo con CSS
  3. Cada fila tiene un controller de evento de click . No importa lo que hace. En mi ejemplo, activará una alert()
  4. El elemento primario de la tabla es un elemento de bloque con una altura fija y un overflow-y establecido en auto
  5. La tabla es más grande que su padre, por lo tanto, el contenido de algunas tablas está oculto y se puede ver con el desplazamiento.

Aquí hay un jsFiddle: http://jsfiddle.net/822eG/4/

En cualquier browser de escritorio, los elementos se mueven con éxito, se activa el clic. En iOS7, el pase está funcionando, pero el clic NO se desencadena.

NOTA : En iOS, debes tocar dos veces para activar el click . El primer clic activará el hover y verá una "checkbox", luego el segundo toque debe activar un click , pero no …

Cualquiera de esas condiciones es OBLIGATORIO para reproducir un problema. Eliminar una sola y comienza a funcionar …

Si elimina una apariencia de "checkbox", el clic funcionará ( http://jsfiddle.net/822eG/5/ ).

Si elimina una corrección de altura, funcionará ( http://jsfiddle.net/822eG/6/ ).

Si elimina un desplazamiento de desbordamiento, funcionará ( http://jsfiddle.net/822eG/8/ ).

Se necesita cualquier solución pero la funcionalidad debe mantenerse intacta. Por lo tanto, no puedo eliminar "checkbox", arreglar el tamaño, pasar el mouse, hacer clic o desbordar el desplazamiento. Además, el cambio de marcado HTML es difícil de realizar.

NOTA : Tengo una solución: vea mi respuesta a continuación. Pero todavía necesito una mejor solución para seguir usando CSS lo máximo posible.

AGREGAR : Archivado un error en Apple # 16072132

Prueba esto:

 .wrapper { -webkit-overflow-scrolling: touch; } 

Para que iOS ignore los estados de desplazamiento, intente con esto:

 .wrapper {cursor: pointer;} 

Puede usar esto en cualquier elemento para que funcione como se esperaba.

De repente, tengo una solución … Uso de JavaScript que puedo eliminar :hover selector de :hover pero aún conservo la funcionalidad.

Si desencadenaré la visibilidad del recuadro de selección no por CSS :hover pero por class y configúrelo a través de javascript, funcionará.

http://jsfiddle.net/822eG/10/

Mi solución de trabajo actual no requiere ningún cambio en una base de código completa y funciona bien en nuestras condiciones.

  1. Con MutationObserver , supervise la inserción del nodo en la head
  2. Si se inserta un nuevo nodo, y este es un link , verifique document.styleSheets
  3. Para cada hoja verifique que las reglas
  4. Si el selector de reglas (access by document.styleSheets[n].rules[i].selectorText ) contiene :hover styles de control de document.styleSheets[n].rules[i].selectorText para este selector
  5. Si los styles contienen una display diferente a la de none o la visibility diferente a la visible : este es un estilo "show by hover"
  6. Para cada cambio de estilo, es selector – replace :hover .hover por .hover y se declara un delegado de body para los events mouseenter y mouseleave que .hover class .hover en el elemento desencadenado

Código fuente completo aquí: https://gist.github.com/Olegas/9143277

.. con esto:

 $('.row').on('touchstart click', function(){ alert('clicked'); }); 
    Intereting Posts