Material: toast: makes the page 'jump' and not shown in the current 'view' of the page

[iseif]

Actual Behavior:

• What is the issue? ngToast makes the page jump for the current location. For example, if I have a long page and the user in the bottom of the page, when I show a toast, on the 'top-right' the page will jump to the top.
• What is the expected behavior? I expect the toast to appear on the 'current' part of the view, if the user in the bottom of the page and the toast is configured to appear on the 'top-right' - I expect to see the toast of the top-right of the current location of the user on the page.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: http://codepen.io/iseif/pen/AXNBKv
• Details: go to the bottom of the page and click on the Show Toast button.

Angular Versions: *

• Angular Version: 1.5.6
• Angular Material Version: 1.0.9

Additional Information:

• Browser Type: * Chrome, Edge, Firfox.
• Browser Version: * latest versions
• OS: * Tested on Windows 10.

[topherfangio]

This is a known issue that we hope to solve with a rewrite of the toast (and some other popup components).

In the meantime, here is an easy workaround: http://codepen.io/topherfangio/pen/qNgdAW?editors=0110

Basically, you create a container (#toast-container in the Codepen) that is only as big as the viewport, and make it the parent of the toast.

Hope this helps.

[grimunit]

I'm seeing the same issue with the dialog and using the example workaround I can't get it to work consistently. Also using fixed positioning blocks the user from interacting with anything else in the view. And then after I get it to popup the z-index is all messed up. Curious if anyone else has found a better workaround.

[donald-oelke]

I have the same issue. The toast gets partially blocked by views in front of it and when I manually set the z-index to put it in front that prevents me from clicking anything on the page. I could probably solve with mouse-events but it would be problematic for some browsers. Anybody found a better solution?

[Splaktar]

Closing this as a duplicate of https://github.com/angular/material/issues/1106.