md-button ripple effect is incorrect size when transform: scale is applied

[buu700]

In my case, I have some buttons that I've shrunken with transform: scale, and the ripple effect looks more like a flash effect (entire button lighting up).

However, the issue fixes itself if I hold my click for a few seconds (just for that particular instance of the effect, that is; the issue doesn't go away for the rest of the session or anything like that).

[robertmesserle]

This sounds like a browser bug more than anything, but do you think that you can provide a codepen or plunker demo?

[buu700]

Hm, I just spent some time testing this again (in Chrome and Firefox on OS X), and it looks like I had the problem slightly off. It's actually unrelated to transform: scale (the small size of the button just makes the effect more prominent in my case).

I'm not sure whether this is by design, but it appears that the origin of the ripple effect is affected by scroll position, not just cursor position.

I can get back to you with a demo, but in my particular case, what's happening is that when I'm scrolled all the way up on the page and I click the centre of my button, the ripples emanate from around my cursor (the centre of the button); however, as I scroll down the page, the ripple origin grows progressively further south of my cursor.

I couldn't say where, but at a glance of src/core/services/ripple/ripple.js this strikes me as some kind of state issue (assuming it isn't by design).

Also, unrelated, but while testing this, I clicked my button a bunch of times and md-ripples with data-counters #107 and #423 got permanently stuck.

[robertmesserle]

@buu700 I added a fix that SHOULD solve your issue - can you please confirm that the latest code in master fixes this issue?

[buu700]

Awesome, thanks. Looks like it mostly works now in master, except buttons with position: fixed still behave as before.