Panzoom: Zoom de pinça quebrado no Chrome v55.02883.91 no celular

Criado em 12 dez. 2016  ·  20Comentários  ·  Fonte: timmywil/panzoom

Assunto do problema

Zoom de pinça quebrado no Chrome v55.02883.91 no sistema móvel e Android WebView v55.02883.91
Isso se aplica a dispositivos móveis Android usando Chrome (navegador) e aplicativos Cordova usando Android System WebView.

Seu ambiente

  • jquery.panzoom.min.js 3.2.2
  • jquery-1.11.1.min.js (para meus aplicativos Cordova), no entanto, o site de demonstração também não funciona.
  • Chrome quebrado (veja a versão acima). Ainda funciona usando "Internet" como navegador em telefones Samsung.

Passos para reproduzir

  1. Obtenha um Samsung Galaxy S6 Edge + (ou equivalente)
  2. Atualize o Chrome e / ou sistema Android WebView para v55 etc.
  3. Carregue na página de demonstração
  4. tente dar um zoom no tigre - ela quebrou o companheiro!

Comportamento esperado

Na versão anterior do Chrome (até a v54, funcionou perfeitamente, ou seja, ampliado!

Comportamento real

O que acontece na v55 é que tudo o que você tem é o panorama, não o zoom, e a imagem panorâmica às vezes "pula" entre os dedos comprimidos e cria um efeito de piscar quando a imagem é girada entre seus dois dedos.

Comentários muito úteis

Teve um hack rápido no código e comentando a linha 1164:

this.panning = true;
permite pinch-zoom novamente para mim (e não afeta a panorâmica). Não consigo ver onde this.panning é definido como falso, exceto na inicialização ... YMMV.

Todos 20 comentários

Obrigado por relatar este problema. Em um momento meu aplicativo parou de funcionar no zoom e não sei por quê.

Meu aplicativo também quebrou. Comportamento estranho no cromo recém-atualizado (eventos de arrastar parecem rolar a janela e eventos de pinça são ... bizarros). Outro dispositivo com cromo não atualizado funcionando bem. Atualizou o cromo ontem à noite e também quebrou.

Obrigado por abrir esta edição.
Meu aplicativo para de funcionar também na área de trabalho do Chrome por esse motivo.

Solução - adicionar
touch-action: none;
ao css de seu contêiner panzoom e o navegador não executará seus próprios eventos de toque para esse componente.

É uma coisa nova: https://developers.google.com/web/updates/2016/10/pointer-events

Solução - adicionar
ação de toque: nenhuma;
ao css de seu contêiner panzoom e o navegador não executará seus próprios eventos de toque para esse componente.

É uma coisa nova: https://developers.google.com/web/updates/2016/10/pointer-events

Não está funcionando.

Teve um hack rápido no código e comentando a linha 1164:

this.panning = true;
permite pinch-zoom novamente para mim (e não afeta a panorâmica). Não consigo ver onde this.panning é definido como falso, exceto na inicialização ... YMMV.

Teve um hack rápido no código e comentando a linha 1164:
this.panning = true;
permite pinch-zoom novamente para mim (e não afeta a panorâmica). Não consigo ver onde this.panning é definido como falso, exceto na inicialização ... YMMV.

Obrigado, funciona para mim!

Teve um hack rápido no código e comentando a linha 1164:
this.panning = true;

Womp aí está ...

Este 'hack' faz o truque! Agora funciona no Android 55

Testado novamente no iOS 10.2, Android 53 - ainda funcionando como antes!

Obrigado vrtual!

Teve um hack rápido no código e comentando a linha 1164:
this.panning = true;
permite pinch-zoom novamente para mim (e não afeta a panorâmica). Não consigo ver onde this.panning é definido como> false, exceto na inicialização ... YMMV.

Funciona bem para mim ... obrigado cara
Estou fazendo minha própria função de zoom, mas isso me salva por agora ... obrigado

Testado em android google webview atualização de 14 de dezembro de 2016 ...

Teve um hack rápido no código e comentando a linha 1164:
this.panning = true;

Isso funciona parcialmente. Obrigado!

Tive sucesso parcial em comentar essa linha, agora ela amplia do canto superior esquerdo em vez do local de interação, mas isso é uma grande melhoria.

Parece que o cromo mais recente mudou onde as referências de pageX e pageY ficam no evento.
Até a mudança do cromo, todos os navegadores o tinham em event.pageX ....
Agora ele fica em event.originalEvent.pageX ...

Estou no meio do caminho para revisar o código do panzoom. Para fazê-lo funcionar no Chrome usando eventos de mouse, altere estas linhas:
linha 1191: 1192
Mudar de:
startPageX = event.pageX; startPageY = event.pageY;
para:
if (typeof event.pageX === 'undefined'){ startPageX = event.originalEvent.pageX; startPageY = event.originalEvent.pageY; }else{ startPageX = event.pageX; startPageY = event.pageY; }
na linha 1232 adicione:
if (typeof coords.pageX === 'undefined'){ coords['pageX'] = coords.originalEvent.pageX; coords['pageY'] = coords.originalEvent.pageY; }

Mais virão para os eventos de toque conforme eu passar por isso.

Comentando "this.panning = true;" corrige, mas não é mais tão suave assim e em dispositivos mais antigos o zoom torna-se bastante lento. Suponho que comentar isso consome muito mais energia da CPU e, portanto, dispositivos mais antigos não conseguem acompanhar.

Você tentou atualizar para a nova versão (3.2.2) e comentar a linha fornecida?

Posso confirmar que esse bug ainda existe (e que a correção funciona) na v3.2.2 e no Chrome 56.

Não tenho 100% de certeza, mas acho que o problema é o seguinte:
Essa variável ( this.panning ) parece ter o propósito de evitar que mais de uma instância da função _startMove seja disparada simultaneamente. Deve ser redefinido para false no evento endEvent (linha 1249), mas acho que não está funcionando corretamente (não investiguei profundamente o suficiente para descobrir o porquê). Pode ser por isso que ThorConzales descobriu que a correção causa desempenho reduzido.

Correção alternativa: descobri que adicionar this.panning = false; ao final da função _startMove (após a linha 1255) também resolve esse problema. Não testei em dispositivos mais antigos, então não posso confirmar se isso ajuda na perda de desempenho, mas se outra pessoa pudesse, eu agradeceria.

obrigado @JamesCatt tentará sua alternativa.

@timmywil !?

@JamesCatt a correção alternativa não funcionou para mim e o zoom foi interrompido novamente (relatado por um usuário, pois não tenho um dispositivo para testar a mim mesmo).

A linha de comentários 1164 (this.panning = true) não está funcionando para mim. Eu trapaceei na linha 1143 que alterar moveEvent = 'pointermove' tomoveEvent = 'touchmove', então funciona, não tenho certeza se isso causará outros problemas.

Eu encontrei um hack para resolver este problema.

Devemos definir options.which para -1 na inicialização.

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

__AVISO__
Este hack funciona apenas para um dispositivo de toque. Talvez isso não funcione para um mouse.

A alternativa de @JamesCatt não funcionou para mim. O hack de @hshiozawa executa, pelo menos em um Pixel, Android 7.1.2

Esta página foi útil?
0 / 5 - 0 avaliações