Material-ui: マルチクリックを速くしてもリップルは残ります

どのブラウザを使用していますか？ Chrome59では再現できません。

で再現できません：

• Chrome 59.0.3071.115
• Firefox 54.0.1
• エッジ38.14393.1066.0
• IE 11.1358.14393.0

@ oliviertassinari @ kgregory私はWindows10、 Firefox54.0.1を使用しています。
私はラップトップのタッチパッドを使用して、両方の指でより速い速度でそれを行っています... 1本の指ではそれを行うことができないので、それが違うと思います。 緊急のバグではありませんが、発生する可能性があります。

どちらも再現できませんでしたが（Windows 10、Firefox 54.0.1）、Chromeではマウスの右ボタン（セカンダリ）を使用すると、そのように動作します。

@NonameSLdev私は毎秒約

@Dattayaは、Chromeでこれを再現するために、マウスの右ボタンで繰り返しクリックしていますか？

@Dattayaを気にしないでください、私はChromeでマウスの左ボタンと右ボタンを同時に約10回半高速でクリックして再現しました。

マウスを右クリックすると波紋が出るのではないかと思います。 私はノーと言うでしょう。 したがって、おそらく正しい修正はそれらを無効にすることです。

@oliviertassinariは良い考えですが、この動作につながるリップルに値するユーザーインタラクションの他の組み合わせがおそらく存在するでしょう。 右クリックでのインクの波紋について、標準で何か見たことがありますか（そこには何もないと思います）？ Chromeでは、ブックマークを右クリックしてもブックマークバーに波紋はありません。 多分これは十分な証拠です😄

私はこれをしばらく見てきましたが、なぜこれらの波紋がTouchRippleの状態（波紋配列）で取り残されているのか正確にはわかりません。

9cpsで、私は何か面白いものを見つけました。Firefoxでは波紋は消えず、クロムでは非常にゆっくりと消えます。 しかし、すでに波紋が残っているボタンでFirefoxをクリックするたびに、別の波紋が表示されてから、波紋が表示されます。 確かに奇妙な行動

この問題は＃7575で修正されている可能性があります。 再現できなかったので50/50と言います

すべての依存関係をプルして再インストールするだけで、マウスの左ボタンと右ボタンを半速で同時にクリックすることで再現できます。

@kgregoryその場合、ButtonBaseレベルでの問題だと思います。 試していただきありがとうございます。

この問題は私を夢中にさせています、私が何をしようとしても、私は再現することができません。 good first issueタグを追加しました。他の誰かがそれに対処したい場合は、すばらしいです。そうでない場合は、未解決のままになります。

@oliviertassinari私はそれをいくつかテストしました。 3cpsでも、ラップトップのタッチパッドでしか再現できません。

こんにちはみんな、最初はいい仕事です。
ベータに追いつくのは少し難しいですが、それは毎日より素晴らしいものになっています。

@oliviertassinari私たちはChromeを使用するとこの問題を再現できず、すべてが正常に機能します。 Linuxマシンでは、クロムを使用している場合、3cpsでクリックすると、波打つボタンがどんどん暗くなります。 速くクリックしても、これは再現されません。 注目すべきは、fastclick https://github.com/ftlabs/fastclickを回すと、これが修正され、ボタンがイベントを正しく処理することです。 mui-docページのボタンを押しても、この効果はありません。私が推測しているように、material-uiに副作用のあるライブラリはありません。 たぶん、この問題を再現または区切るのに役立ちます。

私は（とコルドバiOSアプリに取り組んでいますFastClick使用して300msの遅延を回避するために）材料-UI @次の（1.0 V23）を、私は同じ動作を取得しています。 FastClickを削除すると、タッチリップルの蓄積が修正されるようですが、300ミリ秒の遅延のためにUXが低下します。

@oliviertassinari material-ui @ next + cordovaを使用して。FastClickと組み合わせて使用​​すると、このタッチリップルのバグを回避する方法を知っていますか？ または、SplitMeにも300msの遅延がありますか？

FastClickで[email protected]を使用

または、SplitMeにも300msの遅延がありますか？

@ssalkaドキュメントの遅延に気付くことができますか？ これはCordova固有の問題ですか？ 私はSplitMeで長い間多くの仕事をしていません。 私の知る限り、遅延はビューポートメタで取り除くことができます。 確認予定。

これはCordovaの問題（より具体的にはiOS UIWebView）だと思います。 実際、App StoreでSplitMeを見つけることができませんでした。残念ながら、CORSが無効になっていて、Safariで他のドメインへのHTMLリンクが開いているため（iframeを試しましたが、運が悪かったため）、ドキュメントがプロジェクトに読み込まれるかどうかを確認する方法がありません。 。 確かに言えることは、タッチリップルはv0.xで正常に機能し、v1で蓄積されるということです。

一般に、すべての主要なブラウザー（iOS用のSafariも！）は、あなたが言ったように、ビューポートメタタグを使用して修正を実装しているように見えますが、Cordovaによって内部的に使用されるUIWebViewにはまだ存在しています。 ただし、Cordovaを主要なブラウザー/プラットフォームとして数えないので、これが優先事項として数えられないかどうかは理解できます。

迅速な対応に感謝致します！

@ssalka https://github.com/apache/cordova-plugin-wkwebview-engineを試しました

私はそれがはるかに良いことを確認します。 私はSplitMeでこのプラグインを使用しています。

@NonameSLdevまだ問題を再現できますか？ この問題は1年であまり進展していません。 閉めても大丈夫だと思います。

はい、同じ動作です。リップルは残り、ホバーするたびにその一部が失われます。

それは実際には大きな問題ではありませんが、存在します。

更新：待ってください。 ちょうどアイデアを得ました。 これがマウスのアップよりもマウスのダウン（別名クリック）の方が多い場合はどうなりますか？ 2本の指で繰り返し押すと発生する可能性のあるトラックパッドを使用しているためです。

私はこの理論をテストしたところ、それは本当のようです。リップルを作成するために行うようにマルチクリックすると、21個のマウスダウンイベントと11個のマウスアップイベントが発生しました。 これが理由だと思います。 #TookUsLongEnough

@ stavlocker @ oliviertassinari私はしばらくの間この問題に遭遇しています。 私の場合、最終的に'-webkit-app-region': 'no-drag'まで追跡することができ、プロパティを削除すると問題が完全に修正されました。 これは参照されている問題＃11696に類似しているのではないかと思います

参考までに、Chrome61でopenfinを使用しています

@gtsafasおそらくこれで修正できるかもしれませんが、私のコメント（あなたのコメントの上）で言ったように、それはマウスのダウンがアップよりも多いためです。 コードを見なくても、リップルはマウスダウンで作成され、マウスアップで削除されると言えますが、アップよりもダウンの方が多いため、マウスアップは到着しませんでした。 あなたの修正は良いですが、それはウェブキットブラウザでのみ機能します。

私が見ている2つの解決策：

• 波紋にタイマーをかけることをお勧めしますか？ 5秒経っても取り外されない場合は、自動で取り除いてください。 UX側では、これにより、長押ししてリップルが解放されるのを見るユーザーを混乱させる可能性があることを考慮する必要があります。おそらく、クリックを解放してボタンを押したと思わせる可能性があります（ボタンを解放していない場合）。
• マウスを下に向けるのではなく、マウスを上に向けて波紋を作成するだけです。 これは明らかに異なって見え、ユーザーがボタンを押した場合、波紋は表示されませんが、これは修正されます。

@stavlockerええ私はそれを修正として提案していませんでした。 しかし、これを引き起こす他の問題は画像のドラッグであると言っていました。 私にとって、それは特に画像ではなく、ドラッグと相互作用するものでした。 何かがマウスアップの発生を妨げていました。 少なくとも私の場合、クリック速度の異なるユーザーとは関係がなく、cssが存在する間にすべての人に発生しました。

タイマーやマウスを上げることはできますが、これらは問題を隠しているだけです。 パッチを適用する前に、マウスアップが起動しない理由を知る必要があると思います。

これはすべてのマテリアルUIサイトで発生しますか？

@gtsafasそれは興味深いです。 しかし、マウスアップが起動しないのはMUIのバグではありません。 私の場合、トラックパッドで2本の指でクリックできるからです。 私の考えでは、2本の指を使用して、もう1本のマウスが下がっているときに別のマウスを下にトリガーできるため、2本目の指を押しているときにもう一方の指を持ち上げると、トラックパッドが何かが押されているためにマウスが上にあると検出されません。 これにより、アップよりもダウンが多くなるため、リップルが残ります。

@stavlockerわかりました、それでは違います。 これをデバッグしようとしているときに（-webkit-app-regionであることに気付く前に）、マウスのダウン/アップに関するログを追加し、アップよりもダウンの方が多く観察されました。

それで、あなたが通常のマウスを差し込むならば、それはうまく働きますか？

@gtsafas左ボタンと右ボタンを同時にクリックすると、マウスで動作を再現できます。

私たちにもこの問題がありました。 あなたはおそらく他のマウスイベントを防いでいます...あなたのコードをチェックして次のようなものを探してください：

document.addEventListener("mousedown", myScript); // should be document.addEventListener("mousedown", myScript, false);
document.addEventListener("mouseup", myScript); // should be document.addEventListener("mouseup", myScript, false);

//jquery example: 
        // (...)
        documentElement.on({
            'mouseup': (e) => {
                e.preventDefault(); // WRONG! cut this off
                isDrag = false
            },
        // (...)
        });

@ejnuデフォルトの不変を防ぐ必要があります。 何かが間違っている可能性があります。

@kgregory @oliviertassinari
これが正しいかどうかはわかりませんが、少しテストした結果、次のようになりました。
どういうわけか、これはクリックが奇妙な方法でコンテキストメニューと相互作用するときに起こります。 ButtonBaseのonContextMenu={e => {e.preventDefault()}}でリップルを持続させないことで、これをテストしました。 コンテキストメニューでクリックが発生したことを検出できるようには見えませんが、コンテキストメニューイベントの波紋を止めることでこれを修正できたと思います：＃13740

   handleTouchMove = createRippleHandler(this, 'TouchMove', 'stop');

+  handleContextMenu = createRippleHandler(this, 'ContextMenu', 'stop');

   handleBlur = createRippleHandler(this, 'Blur', 'stop', () => {
    clearTimeout(this.focusVisibleTimeout);
    if (this.state.focusVisible) {


        onTouchEnd={this.handleTouchEnd}
        onTouchMove={this.handleTouchMove}
        onTouchStart={this.handleTouchStart}
+       onContextMenu={this.handleContextMenu}
        ref={buttonRef}
        tabIndex={disabled ? '-1' : tabIndex}
        {...buttonProps}

誰でも確認できますか？

@ 0maxxam0はこの問題に40ドルの資金を提供しました。 IssueHuntでご覧ください

＃13740で解決する必要があります。 最新バージョンで問題を再現できる場合は、お知らせください。

@oliviertassinari @ kgregory ＃13740ですでに述べたように、私はまだ再現できます。 このPRは、コンテキストメニューのスパムのみを修正し、トラックパッドのスパムは修正しません。 このコメントは私が苦しんでいる問題を説明し、2つの解決策を提供します。

再現する方法：

1. ボタンコンポーネントのデモに移動し
2. トラックパッドを使用して、ボタンを何度もクリックします

Windows10を実行しているLenovoYoga 700を使用していますが、Chrome 71、Firefox 64（Quantum）、Edge42で再現できます。

以前のテストで結論付けたように、トラックパッドが複数の指を登録し、マウスダウンほど多くのマウスアップを登録しないことがあるため、これはさまざまなコンピューターで再現できると確信して

私のphonegap、iPadのreactmuiアプリに累積的なボタンの波紋が表示されています。 AndroidとWebでは問題ありません。 ボタンをクリックするたびに、飽和するまで暗く（または明るく）なります。

Safari / iOSでもこの問題を確認できます。すばやくタップする必要すらなく、タップした後に暗い/明るいオーバーレイが消えることはありません。

@oliviertassinari @ kgregory ＃13740ですでに述べたように、私はまだ再現できます。 このPRは、コンテキストメニューのスパムのみを修正し、トラックパッドのスパムは修正しません。 このコメントは私が苦しんでいる問題を説明し、2つの解決策を提供します。

再現する方法：

1. Go to the [button component demos](https://material-ui.com/demos/buttons/)

2. Use your trackpad to click the button a bunch of times

Windows10を実行しているLenovoYoga 700を使用していますが、Chrome 71、Firefox 64（Quantum）、Edge42で再現できます。

以前のテストで結論付けたように、トラックパッドが複数の指を登録し、マウスダウンほど多くのマウスアップを登録しないことがあるため、これはさまざまなコンピューターで再現できると確信して

問題がmouseupよりも多くのmousedownイベントが発生することである場合、その要素の外側に対応する数のmouseupがあるかどうかを確認する必要があります。 これらの種類のトリックの1つは、マウスダウンハンドラー（それ自体を削除する）をマウスダウンのルートDOM要素に追加すると、マウスダウンがキャプチャされた場所に関係なく、常にマウスアップが起動します。 クリーンアップをトリガーするために起動するイベントが常にあると思いますが、元の要素では発生していない可能性があります。

@CaptainNこれをどのiOS / Safariで再現していますか。 iOS12.1.2で再作成できません

iOS 11.3.1-ほとんどの場合、IconButtonコンポーネントで見られますが、Fabでも見られます。

次のようになっているようです。

1. タッチポイントから円をアニメートします。
2. アニメーション中にフェードアウト（アルファ）します。
3. アニメーションが完了した後、削除してクリーンアップすると思います。

私の手順2と3は、iPad（11.3.1）、古いiPhone（11.4.1）、またはiPhone 8（12.1.2）では発生しません。

ある時点でコードを掘り下げることができるかどうかはわかりますが、タイミングについては何も約束できません。

@CaptainNこれはドキュメントのデモにありますか、それとも独自のコードですか？ iOS12.1を搭載したiPhone10、または12.1.3を搭載した古いiPadのドキュメントでは再現できないので、交絡因子があるのではないかと思います。

バグではないと言っているわけではありませんが、再現するにはさらに多くの手順が必要になる場合があります。

Meteor、React、Material-UIで構築された中規模のアプリである私自身のアプリにあります。 実際にはまもなく公開されるので、リンクを共有できます。

ある時点で両方ともコードで原因を探し、それが見つからない場合は、削減を作成してみます。

私もSSRを使用しています-スタイル属性の不一致についていくつかの警告が表示されます。通常、サーバーまたはクライアントは-webkit-プレフィックスに同意しません-それは何か関係があるのでしょうか？ 私は実際にmaterial-uiがプレフィックス（autoprefixer）をどのように適用するのか本当にわかりません-それに関するドキュメントはありますか？

これは役立つかもしれません：
https://material-ui.com/getting-started/supported-platforms/#css -prefixing

Meteor、React、Material-UIを使用し、iOSでのみ使用している自分の環境でも、この問題が発生しています。 Chromeのデバイスエミュレーターを使用できましたが、Androidデバイスではなく、iOSデバイスをエミュレートするときにのみこのバグがトリガーされました。
デモサンドボックスでこれを再現することはまだできないようですが、ボタンとタブに問題があるため、ButtonBaseコンポーネントに起因する可能性があります。

開発ツールでモバイルモードが有効になっているWindows上のChromeでもこれが発生しています。 このアプリの場合： https ：

@CaptainN後で見ていきます。 わかりやすくするために、複製手順を投稿できますか。 どのChromeを使用していますか？

以前はかなり一貫して行っていましたが、現在はChromeで再現しようとしていますが、何もしていません。 何かがそれをある種のエラー状態にしたに違いありません。

iOSでは、そのアプリをロードするだけで、問題を簡単に確認できます。 最も簡単な例については、下部のナビゲーションにあるホームボタンと検索ボタンの間を行ったり来たりしてください。 または、検索をタップしてからホームに戻り、ホームを数回押します。

下部のナビゲーションでiOSで再作成できます。

通常のChromeモードからデバイスモードに切り替えた後にページをリロードすると、より一貫した動作を得ることができました。

@ zuus-keith chrome devツールのモバイルシミュレーターに関連している場合、特に修正する必要はありません。 同じ根本原因でない限り？

@oliviertassinari同じ根本原因だと思います。 私は最初に実際のiOSデバイスでそれを見つけましたが、「iPhone」または「iPad」ビューに設定されたchrome devtoolモバイルシミュレーターが同じ動作を生成することがあります。

さらに、これまでのところ、この問題は3つの異なるインスタンスでのみ報告されていますが、すべて同じ技術スタック（Meteor、React、MUI）を使用しています。

これは、「fastclick」と呼ばれる別の非常に一般的なMeteorパッケージが原因であることが判明しました。これは、Safariでは何年もの間（適切なビューポート設定を使用している場合）実際には必要ありませんでした。 この問題に遭遇した場合の解決策は、単に「fastclick」を削除することです。

シミュレートされた環境ではなく、これによって影響を受ける人はいますか？ それともこれを閉じても大丈夫ですか？

これは、シミュレーションされていない環境（iPad）で、meteorアプリからfastclickパッケージを削除することで修正されました。

とりあえず締めくくりますが、再現できる方がいらっしゃいましたらお知らせください。