Toasts overlap

[okelepko]

Try http://jsfiddle.net/gm1o55nt/

Expected
5 toasts appear consecutively.

Actual:
You can see only the last toast ('4').

From the spec:

There is only ever one snackbar displayed. When a second snackbar is triggered while the first is displayed, the first should start the contraction motion downwards before the second one animates upwards.

https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsX3VhUHNoaWVEbDQ/components_snackbars_usage_consecutivesbdifferenttype_005.webm

[RolandHeath]

TL:DR - Your fiddle is slightly wrong, but there is still an issue. Toasts aren't overlapping, but if they're cancelled before display, they will never show.

My initial thoughts on how to fix this fiddle - wrap the $mdToast.show() call in a $timeout.
This has 2 problems:

1. i will be updated all the way to 5 before displaying our toast, which means that each one will have the same value. We can fix this in the example case using an array with array.foreach.
2. The underlying problem you described is still there (but a little better behaved) - $mdtoast.show() doesn't queue snackbars, so in the event that 5 show up at once, you're guaranteed to miss at least 3 of them.
   This can be seen in an updated fiddle, http://jsfiddle.net/goexhv5j/

This might be caused by using $mdToast.cancel instead of $mdToast.hide. This occurs at least once, in the onShow function of toastDefaultOptions. However, it still only seems to be an issue if you're creating multiple toasts from the same event.