Material-ui: Die Welligkeit bleibt bestehen, wenn sie schnell mehrfach angeklickt wird

Welchen Browser verwenden Sie? Ich kann es mit Chrome 59 nicht reproduzieren.

Reproduzierbar in:

• Chrome 59.0.3071.115
• Firefox 54.0.1
• Kante 38.14393.1066.0
• IE 11.1358.14393.0

@oliviertassinari @kgregory Ich bin unter Windows 10, Firefox 54.0.1.
Ich benutze mein Touchpad auf meinem Laptop, um es mit beiden Fingern schneller zu machen ... Ich denke, das ist anders, weil ich es mit einem Finger nicht schaffen kann. Es ist kein dringender Fehler, aber es könnte passieren.

Ich konnte auch nicht reproduzieren (Windows 10, Firefox 54.0.1), aber in Chrome und mit einer rechten (sekundären) Maustaste verhält es sich so.

@NonameSLdev Ich bin ungefähr 9 Klicks pro Sekunde und kann es in dieser Version von Firefox nicht reproduzieren.

@Dattaya Klicken Sie wiederholt mit der rechten Maustaste, um dies in Chrome zu reproduzieren?

Nevermind @Dattaya , ich habe in Chrome reproduziert, indem ich ungefähr zehn Mal gleichzeitig schnell mit der linken und rechten Maustaste gleichzeitig geklickt habe.

Ich frage mich, ob wir mit einem rechten Mausklick eine Welle haben sollten. Ich würde nein sagen. Vielleicht ist die richtige Lösung, sie zu deaktivieren.

@oliviertassinari gute Gedanken, aber es wird wahrscheinlich eine andere Kombination von

Ich habe mir das eine Weile angesehen und bin mir nicht ganz sicher, warum diese Wellen im Zustand des TouchRipple (Ripple-Array) gestrandet sind.

Bei 9cps fand ich etwas Interessantes: Auf Firefox gehen die Wellen nicht weg, auf Chrom gehen sie extrem langsam. ABER bei jedem Klick auf Firefox auf einer Schaltfläche, die bereits Wellen aufweist, die keine weitere Welligkeit hinterlassen haben, wird angezeigt und geht dann und nimmt eine Welligkeit mit. Seltsames Verhalten in der Tat

Das Problem wurde möglicherweise durch # 7575 behoben. Ich würde 50/50 sagen, da ich nicht reproduzieren konnte

Einfach alle Abhängigkeiten gezogen und neu installiert, die immer noch reproduziert werden können, indem Sie mit der linken und rechten Maustaste gleichzeitig in einem halbschnellen Tempo klicken.

@kgregory Ich denke, es ist in diesem Fall ein Problem auf ButtonBase-Ebene. Danke, dass du es ausprobiert hast.

Dieses Problem macht mich verrückt, egal was ich versuche, ich kann es nicht reproduzieren. Ich habe das good first issue -Tag hinzugefügt. Wenn jemand anderes es ansprechen möchte, großartig, sonst bleibt es ungelöst.

@oliviertassinari Ich habe es um ein paar getestet. Ich kann es nur mit dem Touchpad meines Laptops reproduzieren, selbst mit 3 cps.

Hallo Leute, zuerst gute Arbeit.
Ein bisschen rau, um mit der Beta Schritt zu halten, aber es wird von Tag zu Tag fantastischer.

@oliviertassinari Wir verwenden Mui und haben einige seltsame Fehler in Bezug auf dieses Problem. Vielleicht hilft dies, um dies zu beheben: Auf einem Mac können Sie dieses Problem mit Chrome nicht reproduzieren und alles funktioniert einwandfrei. Auf einem Linux-Computer mit Chrom werden die Welligkeitstasten immer dunkler, wenn Sie mit 3 cps darauf klicken. Ein schnelles Klicken reproduziert dies nicht. Bemerkenswert ist, dass das Drehen von Fastclick https://github.com/ftlabs/fastclick , das wir verwenden, dies behebt und Schaltflächen die Ereignisse richtig behandeln. Das Drücken der Tasten auf der mui-doc-Seite hat ebenfalls keinen Effekt, da ich davon ausgehe, dass es keine Bibliotheken gibt, die Nebenwirkungen auf die Material-Benutzeroberfläche haben. Vielleicht hilft es, dieses Problem zu reproduzieren oder abzugrenzen.

Ich arbeite an einer Cordova iOS-App (mit FastClick , um eine Verzögerung von 300 material-ui @ next (1.0 v23) und erhalte das gleiche Verhalten. Das Entfernen von FastClick scheint die Bildung von Berührungswelligkeiten zu beheben, führt jedoch aufgrund der Verzögerung von 300 ms zu einer schlechten UX.

@oliviertassinari Mir ist aufgefallen, dass Sie eine App namens SplitMe haben, die material-ui @ next + cordova verwendet. Kennen Sie eine Möglichkeit, diesen Touch-Ripple-Fehler zu vermeiden, wenn Sie ihn zusammen mit FastClick verwenden? Oder hat SplitMe auch die 300ms Verzögerung?

PS, bevor ich [email protected] mit FastClick verwendet hatte und keine Probleme mit der Berührungswelligkeit hatte

Oder hat SplitMe auch die 300ms Verzögerung?

@ssalka Kannst du die Verzögerung in der Dokumentation bemerken? Ist es ein Cordova-spezifisches Problem? Ich habe lange nicht mehr viel an SplitMe gearbeitet. Soweit ich weiß, kann die Verzögerung mit dem Viewport-Meta entfernt werden. Noch zu bestätigen.

Ich denke, es ist ein Cordova-Problem (genauer gesagt das iOS UIWebView). Ich konnte SplitMe im App Store tatsächlich nicht finden und kann leider nicht überprüfen, ob die Dokumentation in meinem Projekt geladen wird, da CORS deaktiviert ist und HTML-Links zu anderen Domänen in Safari geöffnet werden (ein Iframe versucht, kein Glück). . Alles, was ich mit Sicherheit sagen kann, ist, dass die Berührungswellen unter v0.x gut funktionieren und sich in v1 aufbauen.

Im Allgemeinen sieht es so aus, als hätten alle gängigen Browser (sogar Safari für iOS!) Ein Update mithilfe des Viewport-Meta-Tags implementiert, wie Sie sagten, aber es ist immer noch in der von Cordova intern verwendeten UIWebView vorhanden. Ich würde Cordova jedoch nicht als wichtigen Browser / Plattform zählen, daher werde ich verstehen, wenn dies nicht als vorrangiges Problem gewertet wird.

Danke für die schnelle Antwort!

@ssalka Haben Sie https://github.com/apache/cordova-plugin-wkwebview-engine ausprobiert

Ich bestätige, dass es viel besser ist. Ich benutze dieses Plugin auf SplitMe .

@NonameSLdev Können Sie das Problem trotzdem reproduzieren? Das Thema hat in einem Jahr keine großen Fortschritte gemacht. Ich denke, dass es sicher sein wird, es zu schließen.

Ja, das gleiche Verhalten - die Welligkeit bleibt bestehen und bei jedem Schwebeflug verliert sich ein Teil davon von selbst.

Es ist nicht wirklich ein großes Problem, aber es existiert.

UPDATE : Warte. Ich habe gerade eine Idee. Was ist, wenn es um mehr Maus-Downs (auch bekannt als Klicks) als Maus-Ups geht? Weil ich das Trackpad benutze, das passieren kann, wenn ich zwei Finger zum wiederholten Drücken benutze.

Ich habe diese Theorie gerade getestet und es scheint wahr zu sein: Beim Multiclicken, wie ich es tue, um die Welligkeit zu erzeugen, habe ich 21 Maus-Down-Ereignisse und nur 11 Maus-Up-Ereignisse. Ich denke, das ist der Grund. #TookUsLongEnough

@stavlocker @oliviertassinari Ich bin jetzt schon eine Weile auf dieses Problem gestoßen. Für meinen Fall konnte ich es endlich auf '-webkit-app-region': 'no-drag' zurückverfolgen. Durch Entfernen der Eigenschaft wurde das Problem für mich vollständig behoben. Ich vermute, dass dies dem Problem # 11696 ähnelt, auf das verwiesen wird

Nur zu Ihrer Information, ich benutze Openfin auf Chrom 61

@gtsafas Vielleicht könnte dies das

Zwei Lösungen, wie ich es sehe:

• Ich schlage vor, wir setzen einen Timer auf Wellen? Wenn es nach 5 Sekunden nicht entfernt wird, entfernen Sie es automatisch. Auf der UX-Seite muss berücksichtigt werden, dass dies möglicherweise Benutzer verwirren kann, die lange drücken und sehen, dass die Welligkeit ausgelöst wird, und sie möglicherweise glauben lässt, dass sie die Taste durch Loslassen ihres Klicks gedrückt haben (wenn sie sie nicht freigegeben haben).
• Erstellen Sie einfach die Welligkeit mit der Maus nach oben und nicht mit der Maus nach unten. Dies würde offensichtlich anders aussehen und wenn ein Benutzer eine Taste hält, würde er keine Welligkeit sehen, aber dies behebt dies.

@stavlocker Ja, ich habe es nicht als Lösung vorgeschlagen. Aber ich sagte, dass das andere Problem, das dies verursacht, das Ziehen von Bildern ist. Für mich waren es nicht speziell Bilder, sondern etwas, das mit dem Ziehen interagiert. Etwas verhinderte das Auftreten des Mouseups. Zumindest in meinem Fall war es nicht auf Benutzer mit unterschiedlichen Klickgeschwindigkeiten bezogen, es passierte für alle, während diese CSS dort war.

Wir können einen Timer oder eine Maus aufstellen, aber diese verbergen nur das Problem. Ich denke, wir müssen wissen, warum die Maus nicht ausgelöst wird, bevor wir sie patchen.

Passiert Ihnen das auf jeder Material-UI-Site?

@gtsafas Das ist interessant. Aber es ist kein MUI-Fehler, dass die Maus nicht ausgelöst wird. In meinem Fall liegt es daran, dass ich mit meinem Trackpad mit zwei Fingern klicken kann. Ich denke, weil ich zwei Finger benutze, die eine andere Maus nach unten auslösen können, wenn bereits eine nach unten ist, hebe ich manchmal meinen anderen Finger, während der zweite gedrückt wird, den das Trackpad nicht als Maus nach oben erkennt, weil etwas nach unten gedrückt wird. Dies verursacht mehr Tiefen als Höhen, daher bleibt die Welligkeit erhalten.

@stavlocker ok dann ist das anders. Beim Versuch, dies zu debuggen (bevor mir klar wurde, dass es sich um eine Webkit-App-Region handelt), habe ich die Protokollierung um die Maus nach unten / oben hinzugefügt und auch mehr Downs als Ups beobachtet.

Wenn Sie also eine normale Maus anschließen, funktioniert das einwandfrei?

@gtsafas Sie können das Verhalten mit einer Maus reproduzieren, indem Sie gleichzeitig auf die linke und rechte Taste klicken.

Wir hatten auch dieses Problem. Sie verhindern wahrscheinlich Mausereignisse an anderer Stelle. Überprüfen Sie Ihren Code auf Folgendes:

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 Wir sollten die Standardinvariante verhindern. Etwas könnte falsch sein.

@kgregory @oliviertassinari
Ich bin mir nicht sicher, ob dies richtig ist, aber hier ist, was ich nach ein paar Tests gefunden habe:
Irgendwie passiert dies, wenn ein Klick auf seltsame Weise mit dem Kontextmenü interagiert. Ich habe dies getestet, indem ich die Welligkeit nicht beibehalten konnte mit: onContextMenu={e => {e.preventDefault()}} auf ButtonBase. Es sieht nicht so aus, als könnten Sie erkennen, wann ein Klick auf das Kontextmenü erfolgt, aber ich glaube, ich habe es geschafft, dies zu beheben, indem ich die Welligkeit des Kontextmenüereignisses gestoppt habe: # 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}

Kann jemand bestätigen?

@ 0maxxam0 finanzierte diese Ausgabe mit 40 USD. Sehen Sie es auf IssueHunt

Es sollte mit # 13740 gelöst werden. Wenn Sie das Problem mit der neuesten Version reproduzieren können, lassen Sie es uns wissen!

@oliviertassinari @kgregory Ich kann immer noch reproduzieren, wie ich bereits auf # 13740 sagte. Diese PR behebt nur das Spam im Kontextmenü, nicht jedoch das Spam im Trackpad. Dieser Kommentar beschreibt das Problem, unter dem ich leide, und bietet zwei Lösungen.

Möglichkeiten zur Reproduktion:

1. Gehen Sie zu den Demos der
2. Verwenden Sie Ihr Trackpad, um einige Male auf die Schaltfläche zu klicken

Ich verwende ein Lenovo Yoga 700 unter Windows 10, kann in Chrome 71, Firefox 64 (Quantum), Edge 42 reproduzieren.

Ich bin sicher, dass dies auf verschiedenen Computern reproduziert werden kann, da das Problem darin besteht, dass das Trackpad mehrere Finger registriert und manchmal nicht so viele Maus-Höhen wie Maus-Tiefen registriert, wie ich in meinen vorherigen Tests festgestellt habe.

Ich sehe kumulative Tastenschattierungen in meiner Phonegap, reagiere auf eine Mui-App auf einem iPad. Auf Android und Web gibt es kein Problem. Jedes Mal, wenn ich auf die Schaltfläche klicke, wird es dunkler (oder heller), bis es gesättigt ist.

Ich kann dieses Problem auch unter Safari / iOS bestätigen - es dauert nicht einmal schnell zu tippen, die Dunkel / Hell-Überlagerung verschwindet einfach nie nach dem Tippen.

@oliviertassinari @kgregory Ich kann immer noch reproduzieren, wie ich bereits auf # 13740 sagte. Diese PR behebt nur das Spam im Kontextmenü, nicht jedoch das Spam im Trackpad. Dieser Kommentar beschreibt das Problem, unter dem ich leide, und bietet zwei Lösungen.

Möglichkeiten zur Reproduktion:

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

Ich verwende ein Lenovo Yoga 700 unter Windows 10, kann in Chrome 71, Firefox 64 (Quantum), Edge 42 reproduzieren.

Ich bin sicher, dass dies auf verschiedenen Computern reproduziert werden kann, da das Problem darin besteht, dass das Trackpad mehrere Finger registriert und manchmal nicht so viele Maus-Höhen wie Maus-Tiefen registriert, wie ich in meinen vorherigen Tests festgestellt habe.

Wenn das Problem darin besteht, dass mehr Mousedown-Ereignisse als Mouseup ausgelöst werden, sollten wir prüfen, ob sich außerhalb dieses Elements eine entsprechende Anzahl von Mouseup befindet. Ein Trick für diese Art von Dingen ist das Hinzufügen eines Mouse-Up-Handlers (der sich selbst entfernen würde) zum Root-DOM-Element bei Mouse-Down. Dann wird die Mouse-Up immer ausgelöst, unabhängig davon, wo Mousedown erfasst wurde. Ich vermute, dass es immer ein Ereignis gibt, das ausgelöst wird, um eine Bereinigung auszulösen, aber möglicherweise nicht auf dem Ursprungselement.

@CaptainN Auf welchem iOS / Safari reproduzieren Sie dies

iOS 11.3.1 - meistens sehe ich es auf IconButton-Komponenten, aber auch auf Fab.

Es sieht so aus, als ob es:

1. Animieren Sie den Kreis vom Berührungspunkt aus.
2. Ausblenden (Alpha) während der Animation.
3. Ich gehe davon aus, dass ich nach Abschluss der Animation entfernt und aufgeräumt werde.

Die Schritte 2 und 3 finden für mich auf meinem iPad (11.3.1), einem älteren iPhone (11.4.1) oder iPhone 8 (12.1.2) nicht statt.

Ich werde sehen, ob ich mich irgendwann in den Code vertiefen kann, aber keine Versprechungen bezüglich des Timings machen kann.

@CaptainN Ist dies in den Dokumentendemos oder in Ihrem eigenen Code? Ich kann es nicht mit den Dokumenten auf einem iPhone 10 mit iOS 12.1 oder einem älteren iPad mit 12.1.3 reproduzieren. Ich frage mich also, ob es verwirrende Faktoren gibt.

Nicht zu sagen, dass es kein Fehler ist, aber es sind möglicherweise weitere Schritte erforderlich, um ihn zu reproduzieren.

Es befindet sich in meiner eigenen App, einer mittelgroßen App, die mit Meteor, React und Material-UI erstellt wurde. Es wird tatsächlich bald öffentlich sein, so dass ich einen Link teilen kann.

Ich werde beide irgendwann im Code nach der Ursache suchen, und wenn ich sie nicht finden kann, versuchen Sie, eine Reduzierung zu erzielen.

Ich verwende auch SSR. Ich erhalte einige Warnungen zu nicht übereinstimmenden Stilattributen. Normalerweise stimmt der Server oder Client dem Präfix -webkit- nicht zu. Könnte das etwas damit zu tun haben? Ich bin mir eigentlich nicht sicher, wie material-ui Präfixe anwendet (Autoprefixer) - gibt es dazu Dokumente?

Dies könnte helfen:
https://material-ui.com/getting-started/supported-platforms/#css -prefixing

Ich habe dieses Problem auch in meiner eigenen Umgebung mit Meteor, React und Material-UI und nur unter iOS. Ich konnte den Geräteemulator von Chrome verwenden und diesen Fehler nur beim Emulieren von iOS-Geräten und nicht von Android-Geräten auslösen.
Ich kann dies noch nicht mit den Demo-Sandboxen replizieren, aber es könnte von der ButtonBase-Komponente herrühren, da ich das Problem mit Schaltflächen und Registerkarten sehe.

Ich sehe dies jetzt sogar in Chrome unter Windows, wobei der mobile Modus in Dev Tools aktiviert ist. Auf dieser App: https://www.pixstoriplus.com/

@CaptainN Ich werde später einen Blick darauf werfen. Nur aus Gründen der Klarheit können Sie Ihre Reproduktionsschritte veröffentlichen. Welches Chrome verwenden Sie?

Früher war es ziemlich konsequent, aber jetzt, wo ich versuche, es in Chrome zu reproduzieren, nichts mehr. Etwas muss es in einen Fehlerzustand versetzt haben.

Unter iOS können Sie diese App einfach laden und das Problem ganz einfach erkennen. Tippen Sie für das einfachste Beispiel zwischen den Home- und Suchschaltflächen im unteren Navigationsbereich hin und her. Oder tippen Sie auf Suchen, dann zurück nach Hause und drücken Sie einige Male nach Hause.

Ich kann es unter iOS in der unteren Navigation neu erstellen.

Ich konnte ein konsistenteres Verhalten erzielen, wenn Sie die Seite nach dem Wechsel vom normalen Chrome-Modus in den Gerätemodus neu laden.

@ zuus-keith Wenn es mit dem mobilen Simulator des Chrome Dev Tools zusammenhängt, sollten wir es nicht besonders beheben. Es sei denn, es ist die gleiche Grundursache?

@oliviertassinari Ich glaube, es ist die gleiche Grundursache. Ich bin auf einem tatsächlichen iOS-Gerät darauf gestoßen. Es kommt also vor, dass der mobile Simulator des Chrome Dev Tools, der auf die Ansichten "iPhone" oder "iPad" eingestellt ist, dasselbe Verhalten erzeugt.

Außerdem wurde das Problem bisher nur in drei verschiedenen Fällen gemeldet, die jedoch alle denselben Tech-Stack verwenden (z. B. Meteor, React und MUI).

Dies war auf ein weiteres sehr verbreitetes Meteor-Paket namens "fastclick" zurückzuführen, das in Safari seit Jahren nicht mehr unbedingt erforderlich war (wenn Sie die richtigen Ansichtsfenstereinstellungen verwenden). Wenn jemand auf dieses Problem stößt, besteht die Lösung darin, "fastclick" einfach zu entfernen.

Gibt es jemanden, der davon betroffen ist und sich nicht in einer simulierten Umgebung befindet? Oder ist es in Ordnung, dies zu schließen?

Dies wurde für mich in nicht simulierten Umgebungen (auf dem iPad) behoben, indem das Fastclick-Paket aus meiner Meteor-App entfernt wurde.

Schließen Sie vorerst, wenn jemand reproduzieren kann, lassen Sie es uns wissen.