0

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

Trevor
  • 16,080
  • 9
  • 52
  • 83
  • 1
    I'm going to take a wild guess and say that safari is having an issue with the `height: 100%;` property on `.mat-simple-snackbar`. You could try to restrict it manually, but it might be a problem if you have multi lines snackbars – Morphyish Jul 29 '19 at 21:56
  • 1
    A quick test show the same issue on Edge. You can try to overcharge the height property with `height: auto;`. It seems to work for Edge, but you might want to check other browsers for regression. – Morphyish Jul 29 '19 at 22:01
  • 1
    This does not have anything to do with Firebase Hosting. It just serves exactly the static content you deploy to it. – Doug Stevenson Jul 29 '19 at 22:05
  • @DougStevenson Thanks, so it must have something to do with the way stackblitz is deploying the static content which differs from how it's served within stackblitz. – Trevor Jul 30 '19 at 02:55

1 Answers1

0

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

Trevor
  • 16,080
  • 9
  • 52
  • 83