Panzoom: ピンチズームがAndroidChrome55で機能しない

作成日 2017年01月03日  ·  14コメント  ·  ソース: timmywil/panzoom

問題の主題

ピンチズームがAndroidChrome55で機能しない。

更新-デモページとテストページも失敗します:
ピンチズームは、次のデモアイテムのいずれかでChrome 55を搭載したAndroidデバイスでは機能しません: https
https://timmywil.github.io/jquery.panzoom/test/も失敗します。

上記の両方は、Chromeアップデートがアンインストールされた同じデバイスで正常に機能します。

元の問題レポート:
#308のように、私はしばらくの間jquery.panzoomを使用してきましたが、問題なく動作します。 Chrome55はAndroidでそれを壊しました。 私の場合、パンは問題ありませんが、ピンチズームではパンとフラッシュが発生し、ズームは行われません。
Chromeのアップデートをアンインストールすると、問題は解決します。 IOSSafariまたは古いAndroidChromeでは問題は明らかではありません。

あなたの環境

  • jquery.panzoom2.0.5のバージョン
  • jquery2.1.1のバージョン
  • AndroidLollipop上のChrome55。

更新-jquery.panzoom3.2.2にも同じ問題があり、さらに他の封じ込めの問題があります。 ピンチズームはAndroidChrome55でのみ問題があります。

最も参考になるコメント

Chrome55はタッチイベントとポインタイベントの両方を発生させるようです。 私にとってうまくいく醜い修正の1つは、pointerdownリスナーを削除することです。 したがって、行940は次のようになります。

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

getChromeVersion()implについては、 http: //stackoverflow.com/a/4900484/424563を参照して

最新のjQueryでテスト済み。

全てのコメント14件

ピンチズームがクローム55でも完全に機能しなくなったことを確認できます。 修正を試みるためのコーディング知識があればいいのにと思います。

私も同じ問題を抱えてる。 3.2.2を使用しますが、一部のデバイスでは機能し、他のデバイスでは機能しないようです。 たとえば、Chrome55を搭載したAndroid6.0.1のSamsungは機能しませんが、Nexusデバイスのまったく同じAndroidとChromeは完全に機能します。

ここでも同じ問題があります。 あなたはオンラインでtiをチェックすることができます。 最初のオプションの1つを選択します。 画像が読み込まれると、モバイルではピンチトゥズームが機能しません。

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

すぐに修正してください。

修正:

jqueryとpanzoomの最新バージョンでは、このハックを適用して機能するようです。

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

誰かが私のジレンマを手伝ってくれるのではないかと思います。私はバージョン2.0.5を2年間使用しており、モバイルWebサイトとphonegapアプリで完全に機能します。 唯一の問題は、Android Chrome55をピンチしてズームインすることです。

#303に記載されている行をコメントアウトすることで、バージョン3.2.2でピンチしてズームを機能させることができます。 問題は、3.2.2でサイズと位置の問題が発生し、setMatrix()が明らかに偽の翻訳を追加することです。 このシステムにはいくつかの未解決の問題があり、3.2.2を修正するためのいくつかの試みがありますが、2.0.5ほど安定していないようです。 (Chrome 55の問題のみを除く。)

2.0.5でevent.pageXをevent.originalEvent.pageXに、event.pageYをevent.originalEvent.pageYに置き換えようとしましたが(bodgybrothersがバージョン3.2.2の#303で提案しているように)、修正されません。そして私は、Android Chrome55でピンチズームを使用して2.0.5を動作させるためにこれ以上進む能力がありません。

私の最善の結果は2.xが修正されることですが、それがまだ活発に開発されているかどうかはわかりません。 2.xの修正がない場合、私の唯一の選択肢は、人々が変更を送信している位置の問題がない3.x(4?)の新しいリリースを待つことのようです。

親切な人は私の決定を助けるために何か考えや情報を追加できますか?
乾杯
ジョン

また、バージョン3.2.2にアップデートすることで、ポジショニングの問題に直面しました。
ズームコンテナに高さと幅を追加して並べ替えました。
私にとってこれはうまくいきました。

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

Chrome55はタッチイベントとポインタイベントの両方を発生させるようです。 私にとってうまくいく醜い修正の1つは、pointerdownリスナーを削除することです。 したがって、行940は次のようになります。

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

getChromeVersion()implについては、 http: //stackoverflow.com/a/4900484/424563を参照して

最新のjQueryでテスト済み。

@dagged :ありがとうございますが、
Had a quick hack in the code and commenting out line 1164: this.panning = true;
Panzoom 3.2.2での私の問題は、ポジショニングが台無しになっていることです。私のアプリでは、 @ pravidによって提案された上記の修正は修正されていないようです(とにかくpravidに感謝します)。

@dagged
私の場合、#303の回避策はandroid 6 samsung GalaxyS6では機能しません。
あなたの回避策はうまくいきます!!! 私の日を保存します。 ありがとう!!!

@daggedあなたは救世主です。 ありがとう!!!

@ nich008
2.0.5バグはwindow.PointerEventがtrueです。
したがって、32〜39行目、74行目を非表示にします。 80行目varpointerEvents = false;
タッチイベントを使用しますポインタなし

@chfeizy
一見すると、それはそれを修正しているようです。 ありがとう!!!
[編集]はい-うまく機能しています-ありがとうございます。

#303の複製

@jcnventura :この問題はPanzoomバージョン2.0.5で発生したため、厳密には#303の複製ではありません。 バージョン2.0.5の問題を修正するchfeizyからのコメントがあり、3.2.2よりも信頼性の高いソリューションになっていることに注意してください。

このページは役に立ちましたか?
0 / 5 - 0 評価