Snackbar shows under virtual keyboard and can leave black rectangle on complex layouts on iOS 10 and greater

[pgbross]

What MDC-Web Version are you using?

0.15.0

What browser(s) is this bug affecting?

Safari iOS 10
Mozilla/5.0 (iPad; CPU OS 10_3_2 like Mac OS X) AppleWebKit/603.2.4 (KHTML, like Gecko) Version/10.0 Mobile/14F89 Safari/602.1

What OS are you using?

iOS 10.3.2

What are the steps to reproduce the bug?

1. run the demo server
2. go to localhost:8080/snackbar.html
3. Tab-focus on the first text field
4. The virtual keyboard should popup and if observed carefully you see part of the snackbar background appear just above the keyboard (as part of the overscroll). Sometimes the iPad doesn't clear the "black background" when the keyboard is dismissed by a UI interaction, though it is dependent on the complexity of the page and doesn't happen often in the demo server.
5. The snackbar can be seen under the virtual keyboard - this is not obvious with the default "black" background but if you change the colour to, say, cyan then it is much clearer.

.mdc-snackbar {
  background-color: cyan !important;
}

What is the expected behavior?

The snackbar should not be visible unless it is "active".

What is the actual behavior?

Parts of the snackbar can be seen when it is inactive, either as part of overscroll as the keyboard pops up, or incorrectly rendered by the Safari on iOS (sometimes leaving a black box on the screen in a random place).

Any other information you believe would be useful?

The Snackbar is rendered off-screen using position: fixed and a translate() transform to make it not appear. On making it active the translation is removed and css animates it so it can be seen. On a variable size screen, ie. a tablet or similar with a virtual keyboard (which on the iPad is slightly transparent), the background rectangle can be seen, and when the layout is complex, such as a display: flexbox browsers can render it fully visible and can even be permanently "stuck".

Three possible solutions could be:

1. Make the offscreen translation be large then 100vh, so it is a long way away from any screen resizing behaviour. This may not help with browsers that render complex screens poorly, but could be tried.
2. Make the offscreen version visibility: hidden until it is active so there are hopefully no rendering artefacts.
3. Make the offscreen version display: none until it is active so browsers do not attempt to render it at all, but there may be consequences for the css animation timing.

Option 3 seems optimal, but potentially changes the basic design operation of the snackbar.

[acdvorak]

This issue should be fixed by PR #4166, so I'm going to close it.

If you're still experiencing problems, please feel free to reopen (and include a video/screen capture if possible).

Thanks! 😀