Ripple Effect in Button in Dialog has wrong position

[willwsharp]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

The ripple should originate from the mouse cursor.

What is the current behavior?

The ripple effect sometimes does not originate from the mouse cursor, but instead, somewhere above the mouse cursor.

What are the steps to reproduce?

Replicated here: https://embed.plnkr.co/HzjBCx/

1. Scroll to the bottom of the output
2. Click on either "pick one" button
3. Click on the "example" button to observe the incorrect ripple effect; it originates from above the button.
4. Scroll back up to the top of the page and do the same thing; the ripple effect is working.

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

Ripple effect should probably work in this scenario

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

Not sure which versions of everything are effected. The plunkr posted above is using TypeScript 2.1.1 but I'm not sure which version of Material its using.

[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.}