Ink ripple inconsistent with material design spec (?)

[rosslavery]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Ink ripples in previous material design implementations trigger the effect on mousedown, rather than mouseup.

What is the current behavior?

The effect is only triggered on mouse up, which is far less noticable than prior implementations.

What are the steps to reproduce?

Material2 demo from the PR that added ripples to buttons: https://dozingcat-material2.firebaseapp.com/button
Material1 demo: https://material.angularjs.org/latest/demo/button

Click the buttons to see the difference. Click and hold your mouse button to make the difference more obvious.

What is the use-case or motivation for changing an existing behavior?

Consistency with the spec.

Which versions of Angular, Material, OS, browsers are affected?

All?

[jelbourn]

We worked directly with the Material Design spec folks on this one and their direction was that the ripple is supposed to trigger on the down and not the up.

[rosslavery]

Hi Jeremy,

I apologize, but I typoed in my original bug report (now corrected). What I meant to say is that the ripples are only being triggered on mouseup, not down. Thus, they are behaving incorrectly according to your comment.

Sorry for the confusion, but check out the two demos and you'll see what I mean.

[jelbourn]

Ah, I was just going based on what you wrote 😄 ; my recollection was that the Material Design person we consulted with gave direction that ours should be the way it is (I just didn't remember which was which).

@traviskaufman will have the definitive answer for this

[rosslavery]

Gotcha. Most implementations I've seen are consistent with the mousedown approach (Angular 1 Material, Polymer, etc.)

Interested in the official response though!

[rosslavery]

Not to sound like a broken record, but that the ink ripples still don't appear to match the spec (using beta 10).

In fact, the readme for md-ripple actually specifies:

By default, a ripple is activated when the host element of the md-ripple directive receives mouse or touch events. On a mousedown or touch start, the ripple background fades in.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}