Ripples incorrectly laid out for dialog buttons

What MDC-Web Version are you using?

0.8.0

What browser(s) is this bug affecting?

Tested on Chrome Version 57.0.2987.133 (64-bit)

What OS are you using?

macOS v10.12.3

What are the steps to reproduce the bug?

1. Navigate to http://material-components-web.appspot.com/dialog.html
2. Click the “Show Dialog” button
3. Press and hold the spacebar key, observing the ripple on the accept button as you do so

What is the expected behavior?

The ripple should cover the entirety of the button

What is the actual behavior?

The ripple is sized incorrectly and placed incorrectly within the dialog.

Any other information you believe would be useful?

If you open a dialog and then resize the screen, even a little bit, the ripple becomes positioned and sized correctly. This leads me to believe that this is an issue with when the ripple is being laid out.

I think that a solution might be to call layout() on all of the ripple instances after the dialog opens. However, this presents an issue since the layout() method is not exposed at the MDCRipple component level. Perhaps this is something we should look into in order to accomplish this.

[Alexey1]

It looks like ripples don’t initialize properly when there is css scale transform which the dialog has by default. Ripples work correctly if they are initialized when the dialog does NOT have scale transform.

Here are the workarounds for the users which are based on this observation. But each has its own limitations. They work in my local setup in v0.14.0 but online examples below are in v0.13.0 because unpkg CDN has v0.14.0 broken at this time. These workarounds are NOT guaranteed to work for future versions. Tested in Chrome and Firefox.

Workaround 1 The simplest one. Use it if you are fine to loose scale animation of the dialog during opening and closing time. .mdc-dialog__surface { transform: translateY(150px); }

Workaround 2 Scale animation is preserved. “cancel”, “accept” buttons have correct ripples. But it applies only if the dialog will not have elements with ripples in its body or all ripples are initialized while the dialog is hidden and not opened yet and before a certain piece of code is invoked. This limitation is visible if you click “init ripple button”, open the dialog, then the “ripple button” will have incorrect ripple. https://jsfiddle.net/9w0d6c30/

Workaround 3 Scale animation is preserved. “cancel”, “accept” buttons have correct ripples. This approach is less straightforward than the previous one but it allows to have correct ripples which are added in the dialog body at arbitrary times except during opening and closing animations. if you click “init ripple button”, open the dialog, then the “ripple button” will have correct ripple. https://jsfiddle.net/maqeavo3/

[kfranqueiro]

It sounds like when this was first entered, layout was not exposed on mdc-ripple at the component level, but that is no longer the case as of mdc-web 0.15.0. I’m going to PR a fix that uses it to re-layout ripples within the footer region, which the dialog component already stores references to.