Androidブラウザのタッチイベント停止表示が更新されています。キャンバス/要素 - 回避するには？

オン一部アンドロイドのブラウザがページに触れると、指が離されるまでディスプレイが更新されなくなるようです。これはhtml要素ベースのアニメーション（切り替えクラス）とキャンバスベースのアニメーションの両方で発生します。ただし、通常のjs実行を停止せず、他のイベントは通常どおり起動します。この問題のあるデバイスでは、イルカブラウザも影響を受けているようです（Firefoxではなく）。Androidブラウザのタッチイベント停止表示が更新されています。キャンバス/要素 - 回避するには？

タッチスタート/移動には、stopPropergation（）、cancelBubble = trueと同様にpreventDefault（）が発生しています。 e.returnValue = false; CSSウェブキットの選択も無効になっています。ページはスクロールしません。

同様の質問がここに頼まれました： Does Android browser lock DOM on touchStart?

が、私は、この動作を克服することができ、あるいは少なくとも問題によって影響されるかのデバイスを発見するかどうかを確認したいのですが、それでありますデバイスまたはバージョンのAndroidの問題？デモを実行している質問に答えることができず、あなたのデバイスモデルとユーザーエージェント（デモページの下に表示されている）と一緒にあなたの経験を報告しても、他の人や私自身がその質問に答えるのに役立つかもしれません。ここで

は、デモや動作を再現する手順です。リンクのQRコードはhttps://s3-eu-west-1.amazonaws.com/canvas-test-pd/tmp.pngにあります。

https://s3-eu-west-1.amazonaws.com/canvas-test-pd/index.html

ウェブページが一番上にキャンバスと下部の背景画像とdiv要素を持っています。 1秒ごとにキャンバスがクリアされ、別の画像が表示され、divのクラスが切り替わります（どちらも0〜1 pngの間で切り替わります）。これが数回トグルされたら、キャンバス（上の灰色のボックス）に指を置き、そこに保持します。アニメーションが継続するかどうか（1回または2回停止してから停止することもある）、視覚的な歪みがあるかどうかを確認します。

更新ギャラクシータブ3.2を実行すると、単に表示の更新を継続するには、画面のためのdivを必要としない、文書のtouchstart /最後のハンドラを必要とするようです。感謝jimpic。

私はそれが製造業者のスキンによって引き起こされる問題であると考え始めていますが、これは証明することは難しいと思います。

出典

2012-04-20 Ed Kirk

のための私が始めましょう：指が解除されるまで表示は更新されません。。デバイスHuawei Ascert G300：mozilla/5.0（linux; u; android 2.3.6; en-gb; u8815 build/huaweiu8815c02b882）applewebkit/533.1（khtml、geckoのような）バージョン/ 4.0モバイルサファリ/ 533.1 –

なぜこれが起こっているのかは分かりませんが、ドキュメントタッチイベントの登録時に同様の問題が発生しました。私がタッチ移動イベントだけに登録したとき、私はあなたが経験しているのとまったく同じ問題を抱えていましたが、私もtouchstartに登録したときに突然動きました。あなたの場合は、main.jsに次の行を追加してください。

function touchHandlerDummy(e) 
{ 
    e.preventDefault(); 
    return false; 
} 
document.addEventListener("touchstart", touchHandlerDummy, false); 
document.addEventListener("touchmove", touchHandlerDummy, false); 
document.addEventListener("touchend", touchHandlerDummy, false);

Works on my Galaxy Tab。これがあなたがしようとしていたことを願っています。

出典

2012-05-08 09:11:07 jimpic

デモコードではすでにpreventDefaultを使用していて、touchstartとtouchmoveでfalseを返します。デモページはあなたのタブで動作していますか？アンドロイドのどのバージョンを使用していますか（サブバージョンも同様にx.y.zしてください）？もう一度ありがとうございます –

私はそれが既にpreventDefaultを使用していることを知っていますが、選択された要素に対してのみであり、完全な文書ではないかもしれません。上記の行をjQueryのready（）関数でmain.jsに追加するだけで動作します。私のGalaxy Tabではうまくいきませんでしたが、試してみてください:)（Androidバージョン3.2）完成したプロジェクトのコピーを作成し、上記の行を追加しました。それは今働く。 – jimpic

当初このデモ版では、私はドキュメントのタッチイベントのハンドラを持っていましたが、ユーザエージェントのコピー＆ペーストを可能にするためにハンドラを削除しました。私のデバイス（Huawei g300）の問題は解決しませんが、あなたの3.2タブでその動作を目撃するのは興味深いことです。ドキュメントのタッチスタート/エンドのハンドラがなければ、Galaxy Ace 2.3.3とアンドロイドシミュレータ2.3.3で動作します。私はシムで3.2を試していない - 私は後で比較します。私はこれが異なるスキンメーカーが適用される問題かもしれないと考え始めています。私はあなたの情報で質問を更新します、ありがとう。 –

これはトリック:)

機能touchHandlerDummy（E） {e.preventDefault（）を行います。 falseを返します。 } document.addEventListener（ "touchmove"、touchHandlerDummy、false）;

出典

2012-11-25 11:00:53 k0sh

これはすでにjimpicの答えで提案され、議論されています。また、通常の動作をオーバーライドするときには、常にタッチスタートも処理する必要があります。 –

私は非常に同じ問題を抱えていました。

<meta name="viewport" content="width=device-width">

出典

2013-12-21 18:19:41

この解決策は私のために働いた。しかし、今ではユーザーがページをズームすることができますが、これは嫌です。私のオリジナルのメタタグは次のようになっています： ''。これを試してみると、最大スケールを1.1に設定できることがわかりました。今すぐタッチスタートが動作し、ユーザーはページをズームできますが、ほんの少しです。 '' –

うわー、これでした！あいまいな問題について話してください！ @BrianEphraimページ上でスクロールする必要がない場合は、 'document.body'に' touchmove'イベントリスナーを設定し、そのイベントに対して 'preventDefault'を呼び出すこともできます。それはズーミングを防ぎます。 –

回答がここに私をたくさん助けた：私は<header>セクションに次の行を追加したときに魔法の十分な、問題は完全に姿を消しました。

私のソリューションは、単にあなたがしたいので、もし、ここで言及されたものを組み合わせている：サムスンギャラクシーS2ネイティブブラウザ上
1.「ドラッグアンドドロップ」（アンドロイド4.1.2）
2.無効にするユーザースケーリングページ（スケーリングなしに設定されたビューポート）

<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.01"> 
    <script> 
     window.addEventListener("load", function() { 
      function onTouchPreventDefault(event) { event.preventDefault(); }; 
      document.addEventListener("touchmove", onTouchPreventDefault, false); 
      document.addEventListener("touchstart", onTouchPreventDefault, false); 
     }, false); 
    </script> 
</head>

ビューポート
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.01">
- 残念ながら、ユーザはまだ1.01は、ジョブ
が無効にピンチ
document.addEventListener("touchmove", function (event) { event.preventDefault(); }, false);
- をズームしない、これは
ズーム倍率を無効にする
document.addEventListener("touchstart", function (event) { event.preventDefault(); }, false); //OR document.addEventListener("touchend", function (event) { event.preventDefault(); }, false);
- これはあなたがtouchstartまたはtouchend（あるいはその両方）を使用したい場合は、あなたが選択することができ、ズームにダブルタップを無効にし、このpurpouse

出典

2014-05-20 13:20:17

Androidブラウザのタッチイベント停止表示が更新されています。キャンバス/要素 - 回避するには？

答えて

関連する問題