Android 4 Chrome éxito problema de prueba en eventos de toque después de transformar CSS

Tengo problemas con la combinación de transformaciones CSS y prueba de toque de éxito de evento. Esto sólo se reproduce para mí en Chrome en Android 4 (estable y beta). IOS Safari, así como el escritorio de Chrome con emulación táctil, ambos parecen estar funcionando bien.

Estoy casi seguro de que esto tiene que ser un error, así que creo que estoy buscando principalmente soluciones temporales aquí.

El problema es que las pruebas de éxito para el tacto sólo parece funcionar para donde estaba el elemento antes de la transformación, no la posición final. Puedes ver un ejemplo en mi jsfiddle (solo en Android 4 Chrome):

Jsfiddle: http://jsfiddle.net/LfaQq/ pantalla completa: http://jsfiddle.net/LfaQq/embedded/result/

Si arrastra el cuadro azul hasta la mitad de la pantalla y lo suelta, volverá a la parte superior. Ahora, si intenta arrastrar desde la mitad superior de la página de nuevo, no se registrará ningún tacto. Los eventos táctiles no se disparan en el elemento. Sin embargo, si intenta tocar la parte inferior del elemento, funciona bien. A continuación, puede intentar mover hacia arriba desde la parte inferior, y observando que la prueba de éxito ya no funciona en la parte inferior, pero funciona en la parte superior.

Así es como estoy manejando los eventos:

function handleTouch(e) { console.log("handle touch") e.preventDefault(); switch(e.type){ case 'touchstart': console.log("touchstart"); touchOriginY = e.targetTouches[0].screenY; break; case 'touchmove': console.log("touchmove"); el.innerHTML = e.targetTouches[0].screenY; var p = e.targetTouches[0].screenY - touchOriginY; el.style[TRANSFORM] = 'translate3d(0,' + p + 'px' + ',0)'; break; case 'touchcancel': console.log("touchcancel"); // Fall through to touchend case 'touchend': //console.log("touchend"); //el.style[TRANSITION] = '.4s ease-out'; el.style[TRANSFORM] = 'translate3d(0,0,0)'; break; } } el.addEventListener('touchstart', handleTouch); el.addEventListener('touchend', handleTouch); el.addEventListener('touchmove', handleTouch); el.addEventListener(TRANSITION_END, function(e) { console.log("transition end") el.style[TRANSITION] = ''; });

No tengo ningún problema con las transformaciones en touchmove, ya que no son nuevos toques que se detecten de todos modos.

¿Alguna sugerencia?

Este es un error inusual en Chrome.

Esencialmente, los objetivos de éxito de un elemento se registran durante un pase de diseño por el navegador. Cada vez que establezca innerHTML, el navegador se reenvía y la última vez que se realiza, es antes de que se dispare el evento touchend. Hay un par de maneras alrededor de él:

OPCIÓN 1: Puede configurar un controlador táctil en el elemento del cuerpo y comprobar el objetivo del evento táctil para ver si está tocando el bloque rojo. Extremidad del casquillo a Paul Lewis para este acercamiento.

http://jsfiddle.net/FtfR8/5/

 var el = document.body; var redblock = $('.splash-section'); function handleTouch(e) { console.log("handle touch") if(e.target != redblock) { return; } ....

OPCIÓN 2: Establecer una devolución de llamada táctil vacía en el documento parece solucionar el problema también – de acuerdo con algunos de los informes de errores vinculados, esto hace que la prueba de éxito que se hace en el hilo principal que es un éxito en el rendimiento, pero calcula correctamente Los objetivos de éxito.

http://jsfiddle.net/LfaQq/2/

 document.body.addEventListener('touchstart', function(){});

OPCIÓN 3: Establecer innerHTML después de la transición ha terminado para forzar un relayout:

 el.addEventListener(TRANSITION_END, function(e) { console.log("trans end - offsettop:" + el.offsetTop); el.style[TRANSITION] = ''; el.innerHTML = 'Relayout like a boss!'; });

He creado un informe de error aquí y Rick Byers ha vinculado a un error relacionado con información adicional: https://code.google.com/p/chromium/issues/detail?id=253456&thanks=253456&ts=1372075599