I'm fairly new to using AngularJS and I'm working with Angular Materials, and I've come across an issue that I cannot understand.

When writing a md-list, it renders fine in Firefox, and IE (11), but in chrome, each md-list-item takes the full height of the window, but only when I'm running the code for my site.

If I view other pages (eg. the Angular Material demos), or put the code into a shareable editor, like codepen, or jsfiddle, they render fine.

The code below is is a test template which displays incorrectly

```
<html lang="en" >
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-cloak>
  <div style="height:400px;width:500px;">
      <md-list>
        <md-list-item ng-click="null">Item 1</md-list-item>
      </md-list>
      <md-list>
        <md-list-item ng-click="null">Item 2</md-list-item>
      </md-list>
      <md-list>
        <md-list-item ng-click="null">Item 3</md-list-item>
      </md-list>
  </div>

  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>

  <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>

  <script type="text/javascript">
    angular.module('BlankApp', ['ngMaterial']);
  </script>

</body>
</html>

```

CodePen : <http://codepen.io/anon/pen/pyqKZr>

Live Demo of the failed layout: <http://angular.deathwishgame.co.uk/>

Why does this only happen when rendering my own page alone, what am I doing wrong?