Snackbar is shown at startup

[frankiefu]

When you load the app, the snackbar is shown for a fraction of a second and then disappears.

Demo: https://pwa-starter-kit.appspot.com/

[keanulee]

Issue seems to be Chrome-specific. The styles in <snack-bar>'s shadow root are:

      <style>
      :host {
        /* ... */
        transform: translate3d(0, 100%, 0);
        transition-property: visibility, transform;
        transition-duration: 0.2s;
        visibility: hidden;
      }
      :host([active]) {
        visibility: visible;
        transform: translate3d(0, 0, 0);
      }
    </style>

The element does not initially have the active attribute, but it transitions between visible and hidden over the initial 0.2s. This behavior isn't present in Safari nor Firefox.

[keanulee]

Can also consider replacing with MWC snackbar along with #220

[frankiefu]

Yeah if we can use <mwc-snackbar> that would be awesome. But if we can't and we need to fix <snack-bar> then I guess one way to fix this issue is to remove transition-duration: 0.2s from :host and set the transitionDuration after the initial render, e.g.

firstUpdated() {
  requestAnimationFrame(() => this.style.transitionDuration = '0.2s');
}

... or something like that to avoid transition happening at load time.

cc @azakus to confirm <mwc-snackbar> availability.