title: Angular Material Snackbar not shown correctly
body: <p><a href="https://stackblitz.com/edit/angular-qqf5ox" rel="noreferrer">Stackblitz example</a></p>
  
  <p>Hi community
  I implemented a global error handler and a global loading component (angular material spinner) to my angular 7 project.
  When detecting a HttpErrorResponse the loader should be removed and an angular material snackbar should be shown.</p>
  
  <p>The snackbar should open at the bottom of the page and should close when clicking "x".</p>
  
  <p>But instead it opens at the upper left side. </p>
  
  <p><a href="https://i.stack.imgur.com/P8T7W.png" rel="noreferrer"><img src="https://i.stack.imgur.com/P8T7W.png" alt="enter image description here"></a></p>
  
  <p>When clicking "x" it closes and opens again at the expected position. But then it doesn't react to clicks anymore. It disappears after clicking "x" and then clicking a different position of the window.</p>
  
  <p>This behaviour is also shown when removing the loading spinner.</p>
  
  <p>Does anybody has an idea how to solve this issue?
  Thank you very much.</p>