Search code examples
angularsafariangular-materialfirebase-hostingstackblitz

Snackbar fills whole screen on deploy

The overly large snackbar only happens on the deployment version, I can't figure out what is causing it. But i'm hoping someone could help know what changes can be made in the stackblitz project in order for the bug not to show up on deploy. Or is this strictly a stackblitz to firebase deployment bug?

I found a reference to a similar issue here, the solution seemed simple enough and was due to not closing html tag(s) properly or not having an html doc type declaration. However I tried checking both of those things and it still happens after deploy.

Steps to reproduce:

  1. Open the Basic snack-bar example in stackblitz.
  2. Fork the project and perform a firebase deploy via stackblitz.
  3. Open the deployed project in Safari and summon forth a snackbar.

Expected Behavior:

A snackbar

Actual Behavior:

A supersized jumbo snackbar

https://user-images.githubusercontent.com/4210581/61838180-56939600-ae45-11e9-9392-c4356c2ac72b.png

Environment:

Safari, on Mac OS and IOS

Solution

  • I inquired for help determining what changed between the stackblitz server and fire-base deployment because the unexpected behavior only showed up on deployment.

    At any rate, this seems to be a Material Angular bug. A fix is in the works.

    https://github.com/angular/components/issues/16605