Why Angular Material ngToast makes the page jump?

I want to make my toast to appear in the position where the user is already positioned on the page (in the view that he is already seeing in the browser). But somehow, each time the toast appears the page is jumping to other position.

index.html

<div ng-controller="AppCtrl" layout-fill="" layout="column" class="inset toastdemoBasicUsage" ng-app="MyApp">

  <div ng-repeat="n in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15, 16, 17, 18, 19, 20]">
    <p>{{$index}}</p>
  </div>

    <div layout="row" layout-sm="column" layout-align="space-around">
      <md-button ng-click="showToast()">
        Show Toast
      </md-button>
    </div>
</div>

app.js

angular.module('MyApp')
.controller('AppCtrl', function($scope, $mdToast) {
  $scope.showToast = function() {
    $mdToast.show($mdToast.simple().position('top right').textContent('Hello!'));
  };
})

Please see the following link with a demo (scroll down and click on the 'Show Toast' button: ngToast Example

I want the toast to appear in the top of the current view and not to jump to the top of the page each time it will appear.

By the way, if I will change the toast position to 'bottom right' - the toast appears on the bottom right of the fist view and not on the bottom-right of the section that the user is viewing.

How I can fix this?

Thanks.

Solution

I asked the guys from the Angular Material GitHub and here is the answer they provided:

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: Codepen Example

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.

HTML

<div id="toast-container"></div>
<div ng-controller="AppCtrl" layout-fill="" layout="column" class="inset toastdemoBasicUsage" ng-app="MyApp">

  <div ng-repeat="n in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15, 16, 17, 18, 19, 20]">
    <p>{{$index}}</p>
  </div>

    <div layout="row" layout-sm="column" layout-align="space-around">
      <md-button ng-click="showToast()">
        Show Toast
      </md-button>
    </div>
</div>

CSS

#toast-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 0, 0, 0.2);
}

angular.module('MyApp')
.controller('AppCtrl', function($scope, $mdToast) {
  $scope.showToast = function() {
    $mdToast.show($mdToast.simple().position('bottom right').textContent('Hello!').hideDelay(10000).parent(document.getElementById('toast-container')));
  };
})

Here is the issue I opened there: Angular Material Issue

Thanks.