Material-components-web: Possible to see snackbars in hidden state on any platform with rubber-band scrolling at edges

[kfranqueiro]

What MDC-Web Version are you using?

0.20.0

What browser(s) is this bug affecting?

Chrome or Safari on OS X

What are the steps to reproduce the bug?

1. Go to http://material-components-web.appspot.com/snackbar.html
2. Scroll to the bottom and continue scrolling to cause the browser to rubber-band past the end of the screen

What is the expected behavior?

It shouldn't be possible to see the hidden snackbars.

What is the actual behavior?

The boxes from the "hidden" snackbars are visible.

Any other information you believe would be useful?

Presumably we're leaving these elements in a convenient resting position to transition in. Possible solutions:

• Switch to using animations and set up keyframes so that the resting place is further offscreen but it immediately moves to the current resting place at the beginning of the animation
• Since this is a JS component, programmatically update the transition style (or apply another class) before becoming active / after the transition ends after becoming inactive

[pgbross]

In #928 which is essentially seems to occur for the same reason as this one, one suggestion is that the visibility of the snack bar at rest could be set to "none". I implemented this in a customised adapter for a Vue snack bar component and it works for me and eliminates the artefacts.

I do not know if that is a good solution, but would involve only a minor change to implement it in the foundation if that idea was reviewed and passed accessibility and other requirements.

[deap82]

FYI I've added this in my own scss file to solve the issue for now:

.mdc-snackbar {
    transition: mdc-animation-exit-permanent(transform, .25s), mdc-animation-exit-permanent(opacity, 0ms, .25s);
    opacity: 0;

    &.mdc-snackbar--active {
        transition: mdc-animation-enter(transform, .25s);
        opacity: 1;
    }
}