bug(mat-sidenav-container): Firefox for Android (in landscape) has white cut-off bar at bottom of page when scrolling

[JaxonWright]

Reproduction

This can be seen on the official Angular Material website or any of your own ng projects that use the sidenav container. I originally thought it was a problem with just dialogs, but it is actually with the sidenav container. The behavior does not occur on ng websites that use Angular Material but not the sidenav container.

Steps to reproduce:

1. Open Firefox on your Android phone
2. Switch to landscape orientation
3. Go to material.angular.io
4. Scroll and see the weird bar at the bottom

Expected Behavior

No weird white bar appearing that messes up the rest of the page.

You can see it not occur on my website, https://jaxon.dev until you open one of the dialogs for cryptocurrency on the Contact page. This website does not use the sidenav container, and every one that I have found that does has this problem.

Actual Behavior

I guess you cannot really see the bar since Github is also a white background. Copy the images and you will see.
It seems as though it is roughly the height of the navigation bar of the app, which may tip off the developers of what is going on.

Environment

• Angular: 10.1.0
• CDK/Material: 10.2.4
• Browser(s): Firefox for Android 81.1.4
• Operating System (e.g. Windows, macOS, Ubuntu): Android 10