servidor - Problema de desplazamiento/clic de iOS 7: no se activó ningún clic en algunos casos

contraseña exchange

Question

Tengo una especie de "widget": una tabla de datos con algunas funciones ricas como clasificación, selección de filas y demás.

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

Widget está usando jQuery 1.6.4

No puedo publicar un código de widget completo (y realmente quiere que esto suceda;)), pero puedo reducir un escenario de reproducción al siguiente caso:

1. Tabla html simple con algunas filas, dos cols en cada
2. La primera columna contiene una "casilla de verificación": div simple que normalmente está oculta y se vuelve visible, y luego la fila principal queda suspendida. La visibilidad se activa solo con CSS
3. Cada fila tiene un controlador de evento click . No importa lo que haga. En mi ejemplo, activará una alert()
4. El elemento principal de la tabla es un elemento de bloque con una altura y un overflow-y fijos que se configuran en auto
5. La tabla es más grande que su página principal, por lo tanto, el contenido de la tabla está oculto y se puede ver con el desplazamiento

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

En todos los elementos del navegador de escritorio que se ciernen con éxito, se activa el clic. En iOS7, el control deslizante está funcionando pero el clic NO está activado.

NOTA : en iOS, debe tocar dos veces para activar el click . El primer clic activará el control hover y verá una "casilla de verificación", luego el segundo toque debe activar un click , pero no ...

Cualquiera de esas condiciones es OBLIGATORIA para reproducir un problema. Elimina uno solo y comienza a funcionar ...

Si elimina una apariencia de "casilla de verificación", haga clic en 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/ ).

Cualquier solución es necesaria, pero la funcionalidad debe mantenerse intacta. Por lo tanto, no puedo eliminar la "casilla de verificación", corregir tamaño, desplazarse, hacer clic o desplazar el sobredesbordamiento. Además, cambiar el marcado de HTML difícilmente sucederá.

NOTA : Tengo una solución: mira mi respuesta a continuación. Pero aún necesito una mejor solución para seguir utilizando CSS como la mayor cantidad posible.

ADD : Archivado un error en Apple # 16072132

Answer 1

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

.wrapper 
{cursor: pointer;}

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

Answer 2

De repente, tengo una solución ... Utilizando JavaScript puedo eliminar :hover selector de :hover , pero aun así mantener la funcionalidad.

Si desactivo la visibilidad de casilla de verificación no por CSS :hover pero por clase y configúrelo mediante javascript, funcionará.

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

Answer 3

Prueba esto:

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

Answer 4

..tratar usando esto:

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

Answer 5

Mi solución de trabajo actual no requiere ningún cambio en toda la base de códigos y funciona bien en nuestras condiciones

1. Con MutationObserver , monitoree la inserción del nodo en la head
2. Si se inserta un nuevo nodo, y este es un link , consulte document.styleSheets
3. Para cada hoja, compruebe sus reglas
4. Si el selector de reglas (access by document.styleSheets[n].rules[i].selectorText ) contiene :hover estilos de control de document.styleSheets[n].rules[i].selectorText para este selector
5. Si los estilos contienen una display diferente de none o visibility diferente de visible , este es un estilo "mostrar al pasar el mouse"
6. Para cada uno de estos estilos, cambie su selector - replace :hover por .hover y declare un body delegado para mouseenter y mouseleave events que alternarán .hover class en el elemento disparado

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