Ripple circle on mdc-button is oddly-shaped

[acdvorak]

What MDC-Web Version are you using?

0.18.1

What browser(s) is this bug affecting?

All browsers that support ripple. Specifically, I tested in:

• Chrome 60.0.3112.90
• Safari 10.1.2
• Firefox 54.0.1

What OS are you using?

macOS 10.12.6 (Sierra)

What are the steps to reproduce the bug?

1. Edit demos/button.html to make the button text content wider. E.g.:

   <button class="mdc-button">
     Baseline (very long text)
   </button>

2. Run the demo server
3. Go to localhost:8080/button.html
4. Click on the button whose text you made longer
5. Observe the ripple width

CodePen

What is the expected behavior?

I'm not sure exactly what the ripple should look like, but it's definitely not correct right now.

What is the actual behavior?

The ::before pseudo-element is super wide:

[englishextra]

I've got similar behavior