Material-ui: 如果快速单击，则波纹会停留

你使用的是什么浏览器？ 我无法使用Chrome 59复制它。

无法复制：

• 铬59.0.3071.115
• Firefox 54.0.1
• 边缘38.14393.1066.0
• IE 11.1358.14393.0

@oliviertassinari @kgregory我在Windows 10，Firefox 54.0.1上。
我正在用笔记本电脑上的触摸板用两只手指以更快的速度进行操作……我想这是不同的，因为用一根手指我无法做到这一点。 这不是紧急的错误，但是可能会发生。

我无法重现（Windows 10，Firefox 54.0.1），但是在Chrome中，用鼠标右键（辅助按钮）的确像那样。

@NonameSLdev我大约每秒9次点击，无法在该版本的Firefox中重现。

@Dattaya您是否反复用鼠标右键单击以在Chrome中重现此内容？

没关系@Dattaya ，我在Chrome中通过半快速同时单击鼠标左右键约十次来复制。

我想知道鼠标右键单击会产生涟漪吗？ 我会说不。 因此，也许正确的解决方法是禁用它们。

@oliviertassinari是个好主意，但可能会有其他一些有价值的用户交互组合导致这种现象。 您是否在标准中看到过有关单击鼠标右键时出现墨水波纹的任何信息（我猜那里什么也没有）？ 在Chrome浏览器中，右键单击书签时，书签栏上没有波纹。 也许这是足够的证据😄

我已经看了一段时间，但我不确定为什么这些涟漪会在TouchRipple的状态（涟漪阵列）中滞留。

在9cps时，我发现了一些有趣的东西：在Firefox上，波纹没有消失，在Chrome上，波纹非常缓慢地消失。 但是，在每次单击Firefox时，如果已经有涟漪的按钮没有出现其他涟漪，就会出现然后离开并产生涟漪。 确实是奇怪的行为

该问题可能已通过＃7575解决。 我会说50/50，因为我无法复制

只需拉出并重新安装所有依赖项，仍然可以通过半快速同时单击左右鼠标键来重现。

@kgregory我想在这种情况下，这是ButtonBase级别的问题。 感谢您尝试。

这个问题使我发疯，无论我尝试什么，我都无法繁殖。 我添加了good first issue标签，如果其他人想解决这个问题，那就太好了，否则它将无法解决。

@oliviertassinari我对它进行了一些测试。 即使在3cps的速度下，我也只能使用笔记本电脑的触摸板进行复制。

大家好，起初不错。
跟上beta有点困难，但是每天变得越来越棒。

@oliviertassinari我们使用mui遇到了一些与此问题有关的奇怪错误，也许这有助于解决此问题：在Mac上，使用chrome您无法重现此问题，并且一切正常。 在带有chrome的Linux机器上，当您以3cps的速率单击它时，波纹按钮会越来越暗。 快速单击它不会重现此内容。 值得注意的是，我们使用的快速点击https://github.com/ftlabs/fastclick的旋转将解决此问题，并且按钮将正确处理事件。 按下mui-doc页面上的按钮也不会产生这种效果，因为我认为，没有任何对material-ui产生副作用的库。 也许有助于重现或界定此问题。

我正在使用material-ui @ next （1.0 v23）开发一个cordova iOS应用程序（使用FastClick避免了300ms的延迟），并且得到了相同的行为。 删除FastClick似乎可以解决积累的触摸波纹，但是由于300毫秒的延迟而导致UX效果不佳。

@oliviertassinari我注意到您有一个名为SplitMe的应用程序，该应用程序使用material-ui @ next + cordova，您知道一种与FastClick结合使用时可以避免这种触摸波纹的方法吗？ 还是SplitMe也有300ms的延迟？

PS，在我将[email protected]与FastClick一起使用之前，没有触摸波纹问题

还是SplitMe也有300ms的延迟？

@ssalka您是否注意到文档中的延迟？ 这是Cordova的特定问题吗？ 我已经很长时间没有在SplitMe上做很多工作了。 据我所知，可以使用视口meta来消除延迟。 有待确认。

我认为这是Cordova的问题（更具体地说，是iOS UIWebView）。 我实际上在应用程序商店中找不到SplitMe，但不幸的是，由于CORS已禁用并且指向其他域的HTML链接在Safari中打开，我无法检查文档是否已加载到我的项目中（尝试使用iframe，没有运气） 。 我可以肯定地说的是，触摸波纹在v0.x上可以正常工作，并在v1上可以建立。

总的来说，似乎所有主要浏览器（甚至是iOS的Safari都使用Safari！）都使用viewport meta标签实现了修复，就像您所说的那样，但是Cordova内部使用的UIWebView中仍然存在它。 我不会将Cordova视为主要的浏览器/平台，所以我会理解这是否不是优先事项。

感谢您及时的回复！

@ssalka您是否尝试过https://github.com/apache/cordova-plugin-wkwebview-engine？

我确认这会好得多。 我在SplitMe上使用了这个插件。

@NonameSLdev您还能重现该问题吗？ 一年来，这个问题没有取得太大进展。 我认为将其关闭是安全的。

是的，行为相同-波纹会持续存在，并且在每次悬停时都会失去一些自身。

这并不是真正的主要问题，但确实存在。

更新：等等。 刚有一个主意。 如果这是鼠标按下（又名点击）多于鼠标上升怎么办？ 因为使用触控板可能会发生，因为我要用两根手指反复按压。

我刚刚测试了这个理论，这似乎是真的：当像我一样多次单击以创建波纹时，我得到了21个鼠标按下事件和11个鼠标按下事件。 我认为这就是原因。 #TookUsLongEnough

@stavlocker @oliviertassinari我已经遇到了一段时间了。 就我而言，我终于能够将其跟踪到'-webkit-app-region': 'no-drag'删除该属性对我来说完全解决了这个问题。 我怀疑这可能与引用的问题类似＃11696

仅供参考，我在Chrome 61上使用openfin

@gtsafas也许可以解决这个问题，但是正如我在评论中说的那样（高于您），这是因为鼠标

我认为有两种解决方案：

• 我建议我们在水波纹上放个计时器吗？ 如果5秒钟后仍未将其删除，请自动将其删除。 在UX方面，需要考虑到这可能会使长时间按下并看到释放的涟漪的用户感到困惑，也许使他们认为他们通过释放点击来按下按钮（未释放时）？
• 只需在鼠标向上而不是鼠标向下产生波纹。 这显然看起来会有所不同，如果用户按住按钮，他们不会看到涟漪，但确实可以解决此问题。

@stavlocker是的，我没有提出此建议。 但是我说的是导致此问题的另一个问题是拖动图像。 对我来说，它不是专门的图像，而是与拖动交互的东西。 某种原因阻止了mouseup的发生。 至少就我而言，这与具有不同点击速度的用户无关，它发生在css在场的每个人。

我们可以设置一个计时器或鼠标，但这只是隐藏了问题。 我认为我们需要知道为什么在修补补丁之前没有激活鼠标。

在每个材料用户界面站点上，您是否都会遇到这种情况？

@gtsafas有趣。 但这并不是MUI的错误，它的鼠标没有触发。 就我而言，这是因为使用触控板，我可以用两个手指单击。 我的想法是，因为我使用了两根手指，当已经有一只手指按下时，它可以触发另一只鼠标的按下，所以有时我会在按下第二只手指的同时抬起另一只手指，但由于按下了某些东西，因此触控板无法检测为鼠标。 这导致的起伏多于起伏，因此波纹仍然存在。

@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
我不确定这是否正确，但这是经过一些测试后发现的结果：
单击以一种奇怪的方式与上下文菜单交互时，就会发生这种情况。 我没有通过以下方式进行测试： onContextMenu={e => {e.preventDefault()}} Button 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仅修复上下文菜单垃圾邮件，而不修复轨迹板垃圾邮件。 此评论描述了我所遇到的问题，并提供了两种解决方案。

复制方式：

1. 转到按钮组件演示
2. 使用触控板多次单击按钮

我正在使用运行Windows 10的Lenovo Yoga 700，可以在Chrome 71，Firefox 64（Quantum），Edge 42中重现。

我敢肯定，这可以在不同的计算机上复制，因为问题是触控板记录了多个手指，有时记录的鼠标起伏不如鼠标下移，正如我在之前的测试中得出的结论。

我在phonegap中看到累积的按钮波纹阴影，在iPad上反应了mui应用程序。 在Android和Web上没有问题。 每次单击按钮时，它会变暗（或变亮），直到饱和。

我也可以在Safari / iOS上确认此问题-它甚至不需要快速点击，点击后暗/亮叠加层永远不会消失。

@oliviertassinari @kgregory我仍然可以复制，就像我在＃13740上已经说过的那样。 此PR仅修复上下文菜单垃圾邮件，而不修复轨迹板垃圾邮件。 此评论描述了我所遇到的问题，并提供了两种解决方案。

复制方式：

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

我正在使用运行Windows 10的Lenovo Yoga 700，可以在Chrome 71，Firefox 64（Quantum），Edge 42中重现。

我敢肯定，这可以在不同的计算机上复制，因为问题是触控板记录了多个手指，有时记录的鼠标起伏不如鼠标下移，正如我在之前的测试中得出的结论。

如果问题是触发的mousedown事件多于mouseup事件，则应查看该元素之外是否有相应数量的mouseup。 这些事情的一个窍门是，您可以在鼠标按下时向根DOM元素添加一个鼠标上升处理程序（该操作会自行删除），然后无论捕获鼠标按下的位置如何，都将始终触发鼠标上升。 我怀疑总会触发某些事件来触发清除，但它可能不在原始元素上。

@CaptainN您在什么iOS / Safari上重现此内容。 我无法在iOS 12.1.2上重新创建

iOS 11.3.1-大多数情况下，我在IconButton组件上看到了它，但在Fab上也看到了它。

看起来应该：

1. 从触摸点开始对圆进行动画处理。
2. 动画时淡出（alpha）。
3. 我假设动画完成后将其移除并清理。

在我的iPad（11.3.1），旧版iPhone（11.4.1）或iPhone 8（12.1.2）上，没有发生步骤2和3。

我将看看是否可以在某个时候深入研究代码，但是不能对时序做出任何承诺。

@CaptainN是在文档演示中还是您自己的代码？ 我无法在具有iOS 12.1的iPhone 10或具有12.1.3的旧版iPad上的文档中重现该文档，所以我想知道是否存在混淆因素？

并不是说这不是错误，但是可能需要更多步骤来重现它。

它在我自己的应用程序中，这是一个由Meteor，React和Material-UI构建的中型应用程序。 实际上它将很快公开，因此我可以共享一个链接。

在某种程度上，我都会在代码中寻找原因，如果找不到，请尝试减少。

我也在使用SSR-我确实收到有关样式属性不匹配的警告，通常服务器或客户端在-webkit-前缀上不一致-可以解决吗？ 我实际上不太确定material-ui如何应用前缀（自动前缀）-是否有相关文档？

这可能会有所帮助：
https://material-ui.com/getting-started/supported-platforms/#css -prefixing

我也在自己的环境中使用Meteor，React和Material-UI且仅在iOS上遇到此问题。 我已经能够使用Chrome的设备模拟器，并且只能在模拟iOS设备而不是Android设备时触发此错误。
我似乎还不能用演示沙箱来复制它，但是它可能源于ButtonBase组件，因为我看到按钮和选项卡的问题。

现在，即使在Windows上的Chrome中，在开发工具中启用了移动模式，我也能看到这种情况。 在此应用程序上： https :

@CaptainN我

它以前一直很稳定，但是现在我试图在Chrome中重现它，什么也没有。 一定有某种东西使其处于某种错误状态。

在iOS上，您只需加载该应用程序即可轻松查看问题。 最简单的示例是在底部导航栏中的首页和搜索按钮之间来回轻触。 或点击搜索，然后返回首页，然后按几次主页。

我可以在iOS底部的导航栏上重新创建它。

从常规的Chrome切换到设备模式后，如果重新加载页面，我将获得更一致的行为。

@ zuus-keith如果它与chrome dev工具移动模拟器有关，则我们不应该特别解决此问题。 除非是相同的根本原因？

@oliviertassinari我相信这是相同的根本原因。 我最初是在实际的iOS设备上遇到它的，碰巧将chrome dev工具移动模拟器设置为“ iPhone”或“ iPad”视图会产生相同的行为。

另外，到目前为止，仅在3个不同的实例上报告了该问题，但所有实例均使用相同的技术堆栈（即Meteor，React和MUI）。

事实证明，这是由于另一个非常常见的Meteor软件包称为“ fastclick”的缘故-多年来在Safari中实际上并没有必要（如果使用正确的视口设置）。 如果有人遇到此问题，解决方案是直接删除“ fastclick”。

是否有人受此影响并且不在模拟环境中？ 还是可以关闭它？

通过在流星应用程序中删除fastclick程序包，在非模拟环境（在iPad上）为我修复了此问题。

现在关闭，如果有人可以复制，请告诉我们。