Panzoom: Pinch-Zoom funktioniert nicht auf Android Chrome 55

Erstellt am 3. Jan. 2017  ·  14Kommentare  ·  Quelle: timmywil/panzoom

Thema des Problems

Pinch-Zoom funktioniert nicht unter Android Chrome 55.

Update - Demo- und Testseiten schlagen ebenfalls fehl:
Pinch Zoom funktioniert auf einem Android-Gerät mit Chrome 55 auf keinem der Demo-Elemente hier: https://timmywil.github.io/jquery.panzoom/demo/
https://timmywil.github.io/jquery.panzoom/test/ schlägt ebenfalls fehl.

Beide oben genannten Funktionen funktionieren auf demselben Gerät mit deinstallierten Chrome-Updates einwandfrei.

Originalausgabenbericht:
Wie #308 benutze ich jquery.panzoom seit einiger Zeit und es funktioniert einwandfrei. Chrome 55 hat es auf Android gebrochen. In meinem Fall ist Pan in Ordnung, aber Pinch Zoom verursacht Schwenken und Blinken und kein Zoomen.
Wenn ich Chrome-Updates deinstalliere, verschwindet das Problem. Das Problem ist bei IOS Safari oder älterem Android Chrome nicht offensichtlich.

Ihre Umgebung

  • Version von jquery.panzoom 2.0.5
  • Version von jquery 2.1.1
  • Chrome 55 auf Android Lollipop.

Update - jquery.panzoom 3.2.2 hat das gleiche Problem, plus andere Eindämmungsprobleme. Pinch Zoom nur unter Android Chrome 55 problematisch.

Hilfreichster Kommentar

Es scheint, dass Chrome 55 sowohl Berührungs- als auch Zeigerereignisse auslöst. Eine hässliche Lösung, die für mich funktioniert, ist das Entfernen des Pointerdown-Listeners. Zeile 940 wird also:

var str_down;
if (getChromeVersion() >= 55 && 'ontouchstart' in window) {
    str_down = 'mousedown' + ns + ' MSPointerDown' + ns;
}
else {
    str_down = 'mousedown' + ns + ' pointerdown' + ns + ' MSPointerDown' + ns;
}

Siehe http://stackoverflow.com/a/4900484/424563 für getChromeVersion() impl.

Getestet mit der neuesten jQuery.

Alle 14 Kommentare

Ich kann bestätigen, dass Pinch-Zoom auch in Chrome 55 nicht mehr funktioniert. Ich wünschte, ich hätte die Codierungskenntnisse, um auch nur einen Fix zu versuchen.

Ich habe das gleiche Problem. Mit 3.2.2 scheint es aber auf einigen Geräten zu funktionieren und auf anderen nicht. Zum Beispiel funktioniert Samsung auf Android 6.0.1 mit Chrome 55 nicht, während genau das gleiche Android und Chrome auf dem Nexus-Gerät perfekt funktioniert.

Selbes Problem hier. Sie können ti online überprüfen. Wählen Sie eine der ersten Optionen. Wenn das Bild geladen wird, funktioniert die Pinch-to-Zoom-Funktion auf Mobilgeräten nicht.

https://yagolopez.github.io/Webcams_de_Asturien/www/#/app/meteo

Bitte beheben Sie es bald.

Korrektur:

Mit der neuesten Version von jquery und panzoom scheint es zu funktionieren, wenn Sie diesen Hack anwenden:

https://github.com/timmywil/jquery.panzoom/issues/303#issuecomment -267853623

Ich frage mich, ob mir jemand bei meinem Dilemma helfen kann: Ich benutze die Version 2.0.5 seit zwei Jahren und sie funktioniert perfekt in meiner mobilen Website und in der phonegap-App. Das einzige Problem besteht darin, in Android Chrome 55 . zu zoomen

Ich kann Pinch-to-Zoom-Funktion in Version 3.2.2 erreichen, indem ich die in #303 notierte Zeile auskommentiere. Das Problem ist, dass 3.2.2 Größen- und Positionierungsprobleme einführt und setMatrix() scheinbar falsche Übersetzungen hinzufügt. Es gibt mehrere offene Probleme in diesem System und mehrere Versuche, 3.2.2 zu beheben, aber es scheint nicht so stabil zu sein wie 2.0.5. (Außer nur das Chrome 55-Problem.)

Ich habe versucht, event.pageX durch event.originalEvent.pageX und event.pageY durch event.originalEvent.pageY in 2.0.5 zu ersetzen (wie bodgybrothers in #303 für Version 3.2.2 vorschlagen), aber es behebt es nicht. und ich bin nicht in der Lage, weiter zu versuchen, 2.0.5 mit Pinch-Zoom auf Android Chrome 55 zum Laufen zu bringen.

Mein bestes Ergebnis wäre, dass 2.x repariert wird, aber ich weiß nicht, ob es noch aktiv entwickelt wird. In Ermangelung eines Fixes für 2.x scheint meine einzige Option darin zu bestehen, auf eine neue Version von 3.x (4?) zu warten, die die Positionierungsprobleme nicht aufweist, für die die Leute Änderungen einreichen.

Kann eine freundliche Person irgendwelche Gedanken oder Informationen hinzufügen, um meine Entscheidung zu unterstützen?
Beifall
John

Ich bin auch dem Positionierungsproblem begegnet, als ich auf Version 3.2.2 aktualisiert habe.
Ich habe es sortiert, indem ich meinem Zoom-Container Höhe und Breite hinzugefügt habe.
Bei mir hat das funktioniert.

position:relative; height:100%; transform:matrix(1, 0, 0, 1, 0, 0); transform-origin: 50% 50% 0;

Es scheint, dass Chrome 55 sowohl Berührungs- als auch Zeigerereignisse auslöst. Eine hässliche Lösung, die für mich funktioniert, ist das Entfernen des Pointerdown-Listeners. Zeile 940 wird also:

var str_down;
if (getChromeVersion() >= 55 && 'ontouchstart' in window) {
    str_down = 'mousedown' + ns + ' MSPointerDown' + ns;
}
else {
    str_down = 'mousedown' + ns + ' pointerdown' + ns + ' MSPointerDown' + ns;
}

Siehe http://stackoverflow.com/a/4900484/424563 für getChromeVersion() impl.

Getestet mit der neuesten jQuery.

@dagged : Danke dafür, aber ich
Had a quick hack in the code and commenting out line 1164: this.panning = true;
Mein Problem mit Panzoom 3.2.2 ist, dass die Positionierung durcheinander ist, was in meiner App der oben von @pravid vorgeschlagene

@dagged
In meinem Fall funktioniert #303 Workaround nicht auf Android 6 Samsung Galaxy S6.
dein workaround funktioniert super!!! rette meine Tage. Danke!!!

@dagged du bist der Retter. Danke!!!

@nich008
2.0.5 bug is window.PointerEvent ist wahr.
also Zeile 32-39, Zeile 74 ausblenden; Zeile 80 var pointerEvents = false;
Touch-Ereignis ohne Zeiger verwenden

@chfeizy
Auf den ersten Blick scheint das Abhilfe zu schaffen. Danke!!!
[Bearbeiten] Ja - es funktioniert gut - danke.

Duplikat von #303

@jcnventura : Dieses Problem wurde in der Panzoom-Version 2.0.5 angesprochen, ist also nicht unbedingt ein Duplikat von #303. Beachten Sie, dass es einen Kommentar von chfeizy gibt, der das Problem für Version 2.0.5 behebt, wodurch es eine zuverlässigere Lösung als 3.2.2 wurde.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

rpallares picture rpallares  ·  3Kommentare

ronvillalon picture ronvillalon  ·  8Kommentare

gavJackson picture gavJackson  ·  3Kommentare

PrinceDhankhar picture PrinceDhankhar  ·  16Kommentare

nsshunt picture nsshunt  ·  20Kommentare