Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Ripple is broken on elements with `display: none` on page load

See original GitHub issue

What MDC-Web Version are you using?

0.12.1

What browser(s) is this bug affecting?

Google Chrome Version 57.0.2987.133 (64-bit) Mozilla Firefox Version 52.0.2 (64-bit) Others not tested.

What OS are you using?

Arch Linux Kernel 4.10.8-1

What are the steps to reproduce the bug?

Open this codepen: https://codepen.io/draoncc/pen/OgLrjN
Observe the behaviour of ripples on the buttons.

Note: Alternatively to setting the display state to ‘none’ by script the behaviour can be reproduced by setting an inline style of display: none on the ripple element to break.

What is the expected behavior?

Both buttons have working ripples regardless of “initial” display state.

What is the actual behavior?

The ripple on the #broken-button, which’s style is set to display: none on run of the script, does not work properly.

Issue Analytics

State:
Created 6 years ago
Comments:8 (8 by maintainers)

Top GitHub Comments

1reaction

anton-kachurincommented, Jul 13, 2017

It works either way.

In your case, call document.querySelector('#button').MDCRipple.layout() after changing display property of the button.

0reactions

kfranqueirocommented, Aug 7, 2017

As @anton-kachurin mentioned, layout is now also exposed at the component level on mdc-ripple, which makes this issue resolvable by calling layout on ripples when your element is no longer display: none. As such, I’m going to close this issue.

If anyone still encounters problems particular to a specific use case, please enter a new issue if you think there is something that material-components-web needs to do to resolve it. Thanks!