fix(backdrop): adjust the backdrop height when the viewport resizes

The backdrop's height was being set only on initialization, but this meant that it be clipped if the viewport got resized.

Fixes #8155.

Closes #8285

Author: crisbeto

src/components/backdrop/backdrop.js

@@ -19,23 +19,28 @@
 
 angular
   .module('material.components.backdrop', ['material.core'])
-  .directive('mdBackdrop', function BackdropDirective($mdTheming, $animate, $rootElement, $window, $log, $$rAF, $document) {
+  .directive('mdBackdrop', function BackdropDirective($mdTheming, $mdUtil, $animate, $rootElement, $window, $log, $$rAF, $document) {
     var ERROR_CSS_POSITION = "<md-backdrop> may not work properly in a scrolled, static-positioned parent container.";
 
     return {
       restrict: 'E',
       link: postLink
     };
 
-    function postLink(scope, element, attrs) {
+    function postLink(scope, element) {
 
       // If body scrolling has been disabled using mdUtil.disableBodyScroll(),
       // adjust the 'backdrop' height to account for the fixed 'body' top offset
       var body = $window.getComputedStyle($document[0].body);
+
       if (body.position == 'fixed') {
-        var hViewport = parseInt(body.height, 10) + Math.abs(parseInt(body.top, 10));
-        element.css({
-          height: hViewport + 'px'
+        var debouncedResize = $mdUtil.debounce(resize, 60, null, false);
+
+        resize();
+        angular.element($window).on('resize', debouncedResize);
+
+        scope.$on('$destroy', function() {
+          angular.element($window).off('resize', debouncedResize);
         });
       }
 
@@ -66,6 +71,13 @@ angular
         }
       });
 
+      function resize() {
+        var hViewport = parseInt(body.height, 10) + Math.abs(parseInt(body.top, 10));
+        element.css({
+          height: hViewport + 'px'
+        });
+      }
+
     }
 
   });