ripple: ink ripple not always removed when animation is complete on iOS #11069
Description
Bug, feature request, or proposal:
The ink ripple is not always removed on mobile browsers
Note: this is different from the simulated hover on mobile browsers; The simulated hover is also present but that can be overridden in css if one doesn't want it. But the stale ink ripple is a real bug.
This seems to be related to synthesized mousedown events; When I add
if (!event.$material) return;
to InkRippleCtrl.prototype.handleMousedown then I cannot reproduce it any more. Though that alone is probably too simple a fix since $mdGesture.isHijackingClicks need not be turned on.
What is the expected behavior?
Ink ripples disappear eventually.
What is the current behavior?
Sometimes, an ink ripple remains. Not initially, but eventually when combining long and short clicks.
CodePen and steps to reproduce the issue:
CodePen Demo which shows your issue:
Detailed Reproduction Steps:
- Open codepen in chrome mobile emulator
- Long-click on button (>1s)
- Wait (>1s)
- Short-click on button
- Wait
- Short-click on button
Now there is a
<div class="md-ripple-container" style="background-color: rgba(33, 33, 33, 0.1);"><div class="md-ripple md-ripple-placed md-ripple-scaled md-ripple-active" style="left: 29px; top: 30px; background: rgb(33, 33, 33); width: 132.378px; height: 132.378px; border-color: rgb(33, 33, 33);"></div></div>
in the dom that does not go away
Which versions of AngularJS, Material, OS, and browsers are affected?
AngularJS material 1.1.5
Android chrome
iOS Safari
Chrome mobile emulator