Panzoom: Pellizcar zoom roto en Chrome v55.02883.91 en dispositivos móviles

Creado en 12 dic. 2016  ·  20Comentarios  ·  Fuente: timmywil/panzoom

Asunto del problema

Pellizcar el zoom roto en Chrome v55.02883.91 en el sistema móvil y Android WebView v55.02883.91
Esto se aplica a los dispositivos móviles Android que utilizan Chrome (navegador) y las aplicaciones Cordova que utilizan WebView del sistema Android.

Tu entorno

  • jquery.panzoom.min.js 3.2.2
  • jquery-1.11.1.min.js (para mis aplicaciones cordova) sin embargo, el sitio web de demostración tampoco funciona.
  • Cromo roto (ver versión anterior). Todavía funciona con "Internet" como navegador en los teléfonos Samsung.

pasos para reproducir

  1. Hazte con un samsung galaxy S6 Edge + (o equivalente)
  2. Actualice Chrome y / o Android System WebView a v55, etc.
  3. Cargar en la página de demostración
  4. Intenta hacer zoom en el tigre, ¡se rompió, compañero!

Comportamiento esperado

En la versión anterior de Chrome (hasta la v54, funcionó perfectamente, es decir, con zoom!

Comportamiento real

Lo que sucede en la v55 es que todo lo que obtienes es la panorámica, no el zoom y la imagen panorámica a veces 'salta' entre los dedos y crea un efecto de destello cuando la imagen se voltea entre tus dos dedos.

Comentario más útil

Tuve un truco rápido en el código y comentando la línea 1164:

this.panning = true;
permite pellizcar-hacer zoom nuevamente para mí (y no afecta la panorámica). No puedo ver dónde this.panning se establece en falso, excepto en la inicialización ... YMMV.

Todos 20 comentarios

Gracias por informar de este problema. En un momento, mi aplicación dejó de funcionar con zoom y no sé por qué.

Mi aplicación también se rompió. Comportamiento extraño en Chrome recién actualizado (los eventos de arrastre parecen desplazarse por la ventana y los eventos de pellizco son ... extraños). Otro dispositivo con cromo no actualizado funciona bien. Chrome actualizado anoche y también se rompió.

Gracias por abrir este número.
Mi aplicación deja de funcionar también en el escritorio de Chrome por este motivo.

Solución - agregar
touch-action: none;
al CSS de su contenedor panzoom y el navegador no realizará sus propios eventos táctiles para ese componente.

Es algo nuevo: https://developers.google.com/web/updates/2016/10/pointer-events

Solución - agregar
acción táctil: ninguna;
al CSS de su contenedor panzoom y el navegador no realizará sus propios eventos táctiles para ese componente.

Es algo nuevo: https://developers.google.com/web/updates/2016/10/pointer-events

No funciona.

Tuve un truco rápido en el código y comentando la línea 1164:

this.panning = true;
permite pellizcar-hacer zoom nuevamente para mí (y no afecta la panorámica). No puedo ver dónde this.panning se establece en falso, excepto en la inicialización ... YMMV.

Tuve un truco rápido en el código y comentando la línea 1164:
this.panning = true;
permite pellizcar-hacer zoom nuevamente para mí (y no afecta la panorámica). No puedo ver dónde this.panning se establece en falso, excepto en la inicialización ... YMMV.

Gracias, funciona para mi!

Tuve un truco rápido en el código y comentando la línea 1164:
this.panning = true;

Womp ahí está .....

¡Este 'truco' hace el truco! Ahora funciona en Android 55

Probado nuevamente en iOS 10.2, Android 53, ¡sigue funcionando como antes!

¡Gracias vrtual!

Tuve un truco rápido en el código y comentando la línea 1164:
this.panning = true;
permite pellizcar-hacer zoom nuevamente para mí (y no afecta la panorámica). No puedo ver dónde se establece this.panning en> falso excepto en la inicialización ... YMMV.

Funciona bien para mi ... gracias hombre
Estoy haciendo mi propia función de zoom, pero esto me salva por ahora ... gracias

Probado en android google webview 2016 dec 14 actualización ...

Tuve un truco rápido en el código y comentando la línea 1164:
this.panning = true;

Esto funciona parcialmente. ¡Gracias!

Tuve un éxito parcial al comentar esa línea, ahora se amplía desde la parte superior izquierda en lugar de la ubicación de interacción, pero eso es una gran mejora.

Parece que la última versión de Chrome ha cambiado donde se encuentran las referencias de pageX y pageY en el evento.
Hasta ese cambio de Chrome, todos los navegadores lo tenían en event.pageX ....
Ahora se encuentra en event.originalEvent.pageX ...

Estoy en la mitad del proceso de repasar el código panzoom. Para que funcione en Chrome usando eventos del mouse, cambie estas líneas:
línea 1191: 1192
Cambiar de:
startPageX = event.pageX; startPageY = event.pageY;
a:
if (typeof event.pageX === 'undefined'){ startPageX = event.originalEvent.pageX; startPageY = event.originalEvent.pageY; }else{ startPageX = event.pageX; startPageY = event.pageY; }
en la línea 1232 agregue:
if (typeof coords.pageX === 'undefined'){ coords['pageX'] = coords.originalEvent.pageX; coords['pageY'] = coords.originalEvent.pageY; }

Más por venir para los eventos táctiles a medida que avanzo.

Comentando "this.panning = true;" lo corrige, pero ya no es tan suave de esa manera y en dispositivos más antiguos el zoom se vuelve bastante lento. Supongo que al comentarlo se usa mucha más potencia de CPU y, por lo tanto, los dispositivos más antiguos no pueden seguir el ritmo.

¿Ha intentado actualizar a la nueva versión (3.2.2) y comentar la línea dada?

Puedo confirmar que este error todavía existe (y que la solución funciona) en v3.2.2 y Chrome 56.

No estoy 100% seguro, pero esto es lo que creo que es el problema:
Esa variable ( this.panning ) parece tener el propósito de evitar que más de una instancia de la función _startMove se dispare simultáneamente. Se supone que debe restablecerse a false en el evento endEvent (línea 1249), pero supongo que esto no funciona correctamente (no he profundizado lo suficiente para averiguar por qué). Esta puede ser la razón por la que ThorConzales descubrió que la solución provoca una reducción del rendimiento.

Solución alternativa: descubrí que agregar this.panning = false; al final de la función _startMove (después de la línea 1255) también resuelve este problema. No he probado en dispositivos más antiguos, por lo que no puedo confirmar si esto ayuda con la pérdida de rendimiento, pero si alguien más pudiera, lo agradecería.

gracias @JamesCatt intentará su alternativa.

@timmywil !?

@JamesCatt, la solución alternativa no funcionó para mí y el zoom se rompió nuevamente (informado por un usuario ya que no tengo un dispositivo para probarme).

Comentar la línea 1164 (this.panning = true) no me funciona. Hice trampa en la línea 1143 para cambiar moveEvent = 'pointermove' tomoveEvent = 'touchmove', entonces funciona, no estoy seguro de si causará otros problemas.

Encontré un truco que resuelve este problema.

Debemos establecer options.which en -1 en la inicialización.

$("a.panzoom-elements").panzoom({
  which: -1,
});

__ADVERTENCIA__
Este truco funciona solo para un dispositivo táctil. Quizás esto no funcione para un mouse.

La alternativa de @JamesCatt no funcionó para mí. El truco de @hshiozawa , al menos en un Pixel, ejecuta Android 7.1.2

¿Fue útil esta página
0 / 5 - 0 calificaciones