fix(mdBottomSheet): Enable touch interaction on mobile devices

When `<md-content>` recently added the `-webkit-overflow-scrolling: touch`
CSS property, the `z-index` of the bottom sheet was placed into a
separate stacking context and did not respect the `z-index` of the
scroll mask.

Fix by ensuring the bottom sheets appends the scroll mask to the same
parent as the bottom sheet.

Closes #4327.

Author: topherfangio

src/components/bottomSheet/bottom-sheet.js

@@ -161,7 +161,7 @@ function MdBottomSheetProvider($$interimElementProvider) {
       $mdTheming.inherit(bottomSheet.element, options.parent);
 
       if (options.disableParentScroll) {
-        options.restoreScroll = $mdUtil.disableScrollAround(options.parent);
+        options.restoreScroll = $mdUtil.disableScrollAround(bottomSheet.element, options.parent);
       }
 
       return $animate.enter(bottomSheet.element, options.parent)

src/components/bottomSheet/bottom-sheet.spec.js

@@ -70,5 +70,22 @@ describe('$mdBottomSheet service', function() {
       // Focus should be on the last md-autofocus element
       expect($document.activeElement).toBe(focusEl[1]);
     }));
+
+    // This test is mainly for touch devices as the -webkit-overflow-scrolling causes z-index issues
+    // if the scroll mask is appended to the body element
+    it('appends the scroll mask to the same parent', inject(function($mdBottomSheet, $rootScope) {
+      var parent = angular.element('<div>');
+
+      $mdBottomSheet.show({
+        template: '<md-bottom-sheet>',
+        parent: parent
+      });
+
+      $rootScope.$apply();
+
+      var scrollMask = parent[0].querySelector('.md-scroll-mask');
+
+      expect(scrollMask).not.toBeNull();
+    }));
   });
 });