Panzoom: モバイルのChromev55.02883.91でピンチズームが壊れています

作成日 2016年12月12日  ·  20コメント  ·  ソース: timmywil/panzoom

問題の主題

モバイルおよびAndroidシステムWebViewv55.02883.91のChromev55.02883.91でピンチズームが壊れています
これは、Chrome(ブラウザ)を使用するAndroidモバイルデバイスとAndroid SystemWebViewを使用するCordovaアプリに適用されます。

あなたの環境

  • jquery.panzoom.min.js 3.2.2
  • jquery-1.11.1.min.js(私のcordovaアプリ用)ただし、デモWebサイトも機能しません。
  • Chromeが壊れています(上記のバージョンを参照)。 サムスンの携帯電話のブラウザとして「インターネット」を使用して引き続き動作します。

再現する手順

  1. サムスンギャラクシーS6エッジ+(または同等のもの)を手に入れよう
  2. ChromeやAndroidSystemWebViewをv55などにアップグレードします。
  3. デモページに読み込む
  4. 虎にズームインしてみてください-彼女は仲間を壊しました!

期待される動作

以前のバージョンのChrome(v54までは完全に機能しました。つまり、ズームインしました)。

実際の動作

v55で発生するのは、ズームではなくパンだけです。パンされた画像は、ピンチフィンガー間で「ジャンプ」し、2本の指の間で画像が反転するときに点滅効果を生み出します。

最も参考になるコメント

コードをすばやくハックし、1164行目をコメントアウトしました。

this.panning = true;
ピンチズームを再度許可します(パンには影響しません)。 初期化を除いて、this.panningがfalseに設定される場所がわかりません... YMMV。

全てのコメント20件

この問題を報告していただきありがとうございます。 ある瞬間、私のアプリはズームで動作を停止し、理由がわかりません。

私のアプリも壊れました。 新しく更新されたクロムでの奇妙な動作(ドラッグイベントはウィンドウをスクロールしているように見え、ピンチイベントは...奇妙です)。 更新されていないクロームが正常に動作している他のデバイス。 昨夜クロームを更新しました、そしてそれも壊れました。

この号を開いていただきありがとうございます。
このため、Chromeデスクトップでもアプリが機能しなくなります。

解決策-追加
touch-action: none;
パンズームコンテナのcssに接続すると、ブラウザはそのコンポーネントに対して独自のタッチイベントを実行しません。

それは新しいことです: https

解決策-追加
タッチアクション:なし;
パンズームコンテナのcssに接続すると、ブラウザはそのコンポーネントに対して独自のタッチイベントを実行しません。

それは新しいことです: https

動作していません。

コードをすばやくハックし、1164行目をコメントアウトしました。

this.panning = true;
ピンチズームを再度許可します(パンには影響しません)。 初期化を除いて、this.panningがfalseに設定される場所がわかりません... YMMV。

コードをすばやくハックし、1164行目をコメントアウトしました。
this.panning = true;
ピンチズームを再度許可します(パンには影響しません)。 初期化を除いて、this.panningがfalseに設定される場所がわかりません... YMMV。

ありがとう、私のために働きます!

コードをすばやくハックし、1164行目をコメントアウトしました。
this.panning = true;

そこにあります.....

この「ハック」はトリックを行います! Android55で動作するようになりました

iOS 10.2、Android 53で再テスト-以前と同じように機能します!

vrtualに感謝します!

コードをすばやくハックし、1164行目をコメントアウトしました。
this.panning = true;
ピンチズームを再度許可します(パンには影響しません)。 初期化を除いて、this.panningが> falseに設定される場所がわかりません... YMMV。

私にとってはうまくいきます...ありがとう
私は自分のズーム機能をやっていますが、これは今のところ私を救います...ありがとう

android google webview 2016 dec14アップデートでテスト済み...

コードをすばやくハックし、1164行目をコメントアウトしました。
this.panning = true;

これは部分的に機能します。 ありがとう!

その行をコメントアウトすることに部分的に成功しました。インタラクションの場所ではなく左上からズームするようになりましたが、これは大幅な改善です。

ページXとpageYの参照がイベント内にある場所で最新のクロムが変更されたようです。
そのクロムの変更まで、すべてのブラウザはevent.pageX ...にそれを持っていました。
これで、event.originalEvent.pageX ...に配置されます。

私はpanzoomコードを調べている途中です。 マウスイベントを使用してChromeで動作させるには、次の行を変更します。
行1191:1192
から変更する:
startPageX = event.pageX; startPageY = event.pageY;
に:
if (typeof event.pageX === 'undefined'){ startPageX = event.originalEvent.pageX; startPageY = event.originalEvent.pageY; }else{ startPageX = event.pageX; startPageY = event.pageY; }
行1232で追加:
if (typeof coords.pageX === 'undefined'){ coords['pageX'] = coords.originalEvent.pageX; coords['pageY'] = coords.originalEvent.pageY; }

私がそれを通過するとき、タッチイベントのためにもっと来ます。

「this.panning = true;」をコメントアウトするそれを修正しますが、それはもはやそのようにスムーズではなく、古いデバイスではズームがかなり遅くなります。 コメントアウトするとCPUパワーが大幅に消費されるため、古いデバイスでは対応できないと思います。

新しいバージョン(3.2.2)に更新して、指定された行をコメントアウトしてみましたか?

このバグがv3.2.2とChrome56にまだ存在している(そして修正が機能している)ことを確認できます。

100%確信はありませんが、問題は次のとおりです。
その変数( this.panning )は、 _startMove関数の複数のインスタンスが同時に起動されるのを防ぐためのもののようです。 endEventイベント(1249行目)でfalseにリセットされるはずですが、これは正しく機能していないと思います(理由を理解するのに十分なほど深く掘り下げていません)。 これが、ThorConzalesが修正によってパフォーマンスが低下することを発見した理由である可能性があります。

別の修正: _startMove関数の最後(1255行目以降)にthis.panning = false;を追加しても、この問題が解決することがわかりました。 古いデバイスでテストしたことがないので、これがパフォーマンスの低下に役立つかどうかは確認できませんが、他の誰かがそれをいただければ幸いです。

ありがとう@JamesCattはあなたの代わりを試みます。

@timmywil !?

@JamesCatt代替修正が機能せず、ズームが再び壊れました(自分自身をテストするデバイスがないため、ユーザーから報告されました)。

コメント行1164(this.panning = true)が機能していません。 私は1143行目でmoveEvent = 'pointermove' tomoveEvent = 'touchmove'を変更することをだましましたが、それは機能しますが、他の問題が発生するかどうかはわかりません。

私はこの問題を解決するハックを見つけました。

初期化時にoptions.which-1に設定する必要があります。

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

__警告__
このハックは、タッチデバイスでのみ機能します。 たぶん、これはマウスでは機能しません。

@JamesCattの代替手段は私にはうまく@hshiozawaのハックは、少なくともPixelでは、

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