Material snackbar appears in centre of screen before scrolling up from bottom

Question

New to Angular material and using the snackbar and dialog components

The issue I'm having is when opening the snackbar, it appears in the centre of the screen first, disappears and then slides up from the bottom.

Has anyone else come across this problem?

Below are my dependencies in my package.json

 "dependencies": {
    "@agm/core": "^1.0.0-beta.0",
    "@angular/animations": "^5.0.0",
    "@angular/cdk": "^5.0.0-rc.3",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/material": "^5.0.0-rc.3",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/platform-server": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@angular/upgrade": "^5.0.0",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.8",
    "@types/html2canvas": "0.5.32",
    "angular-maps": "^0.7.1",
    "angular2-moment": "^1.7.0",
    "bcrypt": "^1.0.2",
    "bignumber.js": "^5.0.0",
    "body-parser": "^1.17.2",
    "chalk": "^2.3.0",
    "contract-deployer": "^1.0.1",
    "cors": "^2.8.4",
    "eth-lib": "^0.2.5",
    "ethjs-unit": "^0.1.6",
    "express": "^4.15.3",
    "express-validation": "^1.0.2",
    "hammerjs": "^2.0.8",
    "hbs": "~3.1.0",
    "helmet": "^3.9.0",
    "html2canvas": "^0.5.0-beta4",
    "ipfs-api": "^14.0.3",
    "joi": "^13.0.2",
    "jquery": "^3.2.1",
    "jshint-loader": "^0.8.4",
    "json2csv": "^3.11.5",
    "jsonwebtoken": "^7.4.1",
    "lodash": "^4.17.4",
    "moment": "^2.18.1",
    "mongo-querystring": "^4.1.1",
    "mongodb": "^2.2.28",
    "mongoose": "^4.10.5",
    "ng2-nvd3": "^2.0.0",
    "nouislider": "^10.0.0",
    "oboe": "^2.1.4",
    "owl.carousel": "^2.2.0",
    "ramda": "^0.25.0",
    "randomhex": "^0.1.5",
    "request": "^2.83.0",
    "scrypt.js": "^0.2.0",
    "serve-favicon": "^2.4.3",
    "solc": "^0.4.11",
    "swarm-js": "^0.1.37",
    "validator": "^7.2.0",
    "websocket": "^1.0.25",
    "winston": "^2.4.0"
  }

Answer 1

Answered

Angular 5 Material snackbar