[MDCRipple] The ripple is misaligned when used in dialog

Bug report

When placing an element that has a ripple attached (icon-button, checkbox, radio… etc.) inside of an MDC dialog, the ripple is misaligned when first opening the dialog. Upon interacting with the element (clicking for example) the ripple repositions itself properly.

After some research it looks to be a timing issue related to the scale transform style and transition. Along with the timing of when the layoutInternal_ function is called within the ripple foundation. The metrics that is uses are based on the scaled down dialog.

Steps to reproduce

View the stackblitz here: https://stackblitz.com/edit/mdc-dialog-ripple-alignment

1. When the dialog opens, hover over the heart icon-button
2. The ripple will not be the correct size, and is misaligned
3. Click the icon-button and it will then reposition properly

Actual behavior

The ripple position and size is incorrect due to CSS scale transform and transition.

Expected behavior

The ripple should be positioned and sized properly in a dialog (or any animating container element) as if it was placed directly on the static page.

Screenshots

Your Environment:

Software	Version(s)
MDC Web	4.0.0
Browser	Chrome
Operating System	Windows 10

Additional context

Just wanted to get some thoughts on a possible solution or workaround from you. It is causing some negative feedback from our users and other dev team members.

This does happen with other elements like the checkbox, radio, switch, … etc. This is a tough one to “fix” because the ripple would either have to know its context element, or delay its positioning logic but that seems brittle.

Possible solution

I’ve tried messing around with the layoutInternal_ function in the ripple foundation by delaying it with requestAnimationFrame and everything I’ve tried seems hacky. I also don’t think the dialog or ripple should know about each other, but I have gotten it to work by running the layout method on each ripple from the dialog.

Also, just a side note, removing the scale transition in the dialog does cause it to render properly.

[asyncLiz]

I did a little more digging, and this is actually working as intended. See the JavaScript instantiation section of the dialog’s readme.

TL;DR, instantiate or call .layout() on dialog elements when it is opened. Here’s a fork with the solution: https://stackblitz.com/edit/mdc-dialog-ripple-alignment-eoogdd?file=index.js

[asyncLiz]

Thanks for the issue! It looks like we may already be aware of this bug internally, I’ll ask around to see if we have an idea of how to fix it.