Material: ripple: renders fully opaque on mouseleave

[Frank3K]

Actual Behavior:

• What is the issue? * On Chrome (54 and 55) the ripple is rendered fully opaque on mouseleave.
• What is the expected behavior? The ripple is not rendered fully opaque.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: demo
• Details: Demo GIF:

Angular Versions: *

• Angular Version: 1.5.5 (demo) and 1.5.9 (local)
• Angular Material Version: v1.1.1-master-f7ecb4f

Additional Information:

• Browser Type: * Chome (Windows), Chromium (Linux)
• Browser Version: * 54/55 (Windows), 53 (Linux)
• OS: * Windows 10, Ubuntu 16.10
• Stack Traces:

Initially I thought that #9449 would maybe solve the issue. During a simple test this did not seem to be the case.

[nnmrts]

i know this bug, but i can only recreate it with a very very long click, like 1 second or so
a normal click just shows me the normal ripple

i'm using chrome 56.0.2924.14 dev (64-bit) and windows 10

[Frank3K]

It's true that you need a 'longer' click. Chrome related; I could not reproduce it in Firefox, IE 11 and Microsoft Edge. Seems

[nnmrts]

it's clearly because of that line and related lines in ripple.spec.js:
expect(ripple.css('backgroundColor')).toBe('rgb(187, 187, 187)');

this is the innerHTML of md-ripple-container when the button is clicked:
<div class="md-ripple md-ripple-placed md-ripple-scaled md-ripple-active" style="left: 20px; top: 20px; background: rgb(187, 187, 187); width: 40px; height: 40px; border-color: rgb(187, 187, 187);"></div>

but i don't know how to fix that...it has to do something with the way the browser handles style adding and removing, probably chrome first "removes" the left and top properties because it's easier, although ripple.spec.js removes all css properties at the same time on mouseleave (i think it doesn't even removes the style properties themself, it removes the whole md-ripple child and that's maybe a part of the problem too)

and no, this isn't already fixed in the master branch, i've tried it out

[clshortfuse]

It's definitely related to to #9449. I think we can fix it by removing the image mask. This means Safari 8 will have render bugs, but since Safari 10 is out, we no longer support Safari 8. I'll rework the PR to fix this bug as well.

[Roundaround]

Can confirm removing the image mask works:
Updated Demo