diff --git a/src/components/panel/panel.js b/src/components/panel/panel.js
index 7706c8801e0..3130ce33086 100644
--- a/src/components/panel/panel.js
+++ b/src/components/panel/panel.js
@@ -236,7 +236,7 @@ angular
  *   - `locals` - `{Object=}`: An object containing key/value pairs. The keys
  *     will be used as names of values to inject into the controller. For
  *     example, `locals: {three: 3}` would inject `three` into the controller,
- *     with the value 3. 'mdPanelRef' is a reserved key, and will always 
+ *     with the value 3. 'mdPanelRef' is a reserved key, and will always
  *     be set to the created MdPanelRef instance.
  *   - `resolve` - `{Object=}`: Similar to locals, except it takes promises as
  *     values. The panel will not open until all of the promises resolve.
@@ -1296,10 +1296,10 @@ MdPanelService.prototype._closeFirstOpenedPanel = function(groupName) {
 
 
 /**
- * Wraps the users template in two elements, md-panel-outer-wrapper, which
- * covers the entire attachTo element, and md-panel, which contains only the
- * template. This allows the panel control over positioning, animations,
- * and similar properties.
+ * Wraps the user's template in three elements:
+ * - md-panel-outer-wrapper - covers the entire `attachTo` element.
+ * - md-panel-inner-wrapper - handles the positioning.
+ * - md-panel - contains the user's content and deals with the animations.
  * @param {string} origTemplate The original template.
  * @returns {string} The wrapped template.
  * @private
@@ -1311,26 +1311,32 @@ MdPanelService.prototype._wrapTemplate = function(origTemplate) {
   // height and width for positioning.
   return '' +
       '<div class="md-panel-outer-wrapper">' +
-      '  <div class="md-panel _md-panel-offscreen">' + template + '</div>' +
+        '<div class="md-panel-inner-wrapper" style="left: -9999px;">' +
+          '<div class="md-panel _md-panel-offscreen">' + template + '</div>' +
+        '</div>' +
       '</div>';
 };
 
 
 /**
- * Wraps a content element in a md-panel-outer wrapper and
- * positions it off-screen. Allows for proper control over positoning
- * and animations.
+ * Wraps a content element in a `md-panel-outer-wrapper`, as well as
+ * a `md-panel-inner-wrapper`, and positions it off-screen. Allows for
+ * proper control over positoning and animations.
  * @param {!angular.JQLite} contentElement Element to be wrapped.
  * @return {!angular.JQLite} Wrapper element.
  * @private
  */
 MdPanelService.prototype._wrapContentElement = function(contentElement) {
-  var wrapper = angular.element('<div class="md-panel-outer-wrapper">');
+  var outerWrapper = angular.element(
+    '<div class="md-panel-outer-wrapper">' +
+      '<div class="md-panel-inner-wrapper" style="left: -9999px;"></div>' +
+    '</div>'
+  );
 
   contentElement.addClass('md-panel _md-panel-offscreen');
-  wrapper.append(contentElement);
+  outerWrapper.children().eq(0).append(contentElement);
 
-  return wrapper;
+  return outerWrapper;
 };
 
 
@@ -1397,6 +1403,9 @@ function MdPanelRef(config, $injector) {
   /** @type {!angular.JQLite|undefined} */
   this.panelEl;
 
+  /** @type {!angular.JQLite|undefined} */
+  this.innerWrapper;
+
   /**
    * Whether the panel is attached. This is synchronous. When attach is called,
    * isAttached is set to true. When detach is called, isAttached is set to
@@ -1839,6 +1848,11 @@ MdPanelRef.prototype._compile = function() {
       );
     }
 
+    // Save a reference to the inner wrapper.
+    self.innerWrapper = angular.element(
+      self.panelContainer[0].querySelector('.md-panel-inner-wrapper')
+    );
+
     // Save a reference to the cleanup function from the compiler.
     self._compilerCleanup = compileData.cleanup;
 
@@ -1915,7 +1929,7 @@ MdPanelRef.prototype._addStyles = function() {
   var self = this;
   return this._$q(function(resolve) {
     self.panelContainer.css('z-index', self.config['zIndex']);
-    self.panelEl.css('z-index', self.config['zIndex'] + 1);
+    self.innerWrapper.css('z-index', self.config['zIndex'] + 1);
 
     var hideAndResolve = function() {
       // Theme the element and container.
@@ -1923,6 +1937,9 @@ MdPanelRef.prototype._addStyles = function() {
 
       // Remove offscreen class and add hidden class.
       self.panelEl.removeClass('_md-panel-offscreen');
+
+      // Remove left: -9999px and add hidden class.
+      self.innerWrapper.css('left', '');
       self.panelContainer.addClass(MD_PANEL_HIDDEN);
 
       resolve(self);
@@ -1989,7 +2006,7 @@ MdPanelRef.prototype._updatePosition = function(init) {
   var positionConfig = this.config['position'];
 
   if (positionConfig) {
-    positionConfig._setPanelPosition(this.panelEl);
+    positionConfig._setPanelPosition(this.innerWrapper);
 
     // Hide the panel now that position is known.
     if (init) {
@@ -1997,19 +2014,19 @@ MdPanelRef.prototype._updatePosition = function(init) {
       this.panelContainer.addClass(MD_PANEL_HIDDEN);
     }
 
-    this.panelEl.css(
+    this.innerWrapper.css(
       MdPanelPosition.absPosition.TOP,
       positionConfig.getTop()
     );
-    this.panelEl.css(
+    this.innerWrapper.css(
       MdPanelPosition.absPosition.BOTTOM,
       positionConfig.getBottom()
     );
-    this.panelEl.css(
+    this.innerWrapper.css(
       MdPanelPosition.absPosition.LEFT,
       positionConfig.getLeft()
     );
-    this.panelEl.css(
+    this.innerWrapper.css(
       MdPanelPosition.absPosition.RIGHT,
       positionConfig.getRight()
     );
@@ -2916,24 +2933,24 @@ MdPanelPosition.prototype.getTransform = function() {
 
 
 /**
- * Sets the `transform` value for a panel element.
- * @param {!angular.JQLite} panelEl
+ * Sets the `transform` value for an element.
+ * @param {!angular.JQLite} el
  * @returns {!angular.JQLite}
  * @private
  */
-MdPanelPosition.prototype._setTransform = function(panelEl) {
-  return panelEl.css(this._$mdConstant.CSS.TRANSFORM, this.getTransform());
+MdPanelPosition.prototype._setTransform = function(el) {
+  return el.css(this._$mdConstant.CSS.TRANSFORM, this.getTransform());
 };
 
 
 /**
  * True if the panel is completely on-screen with this positioning; false
  * otherwise.
- * @param {!angular.JQLite} panelEl
+ * @param {!angular.JQLite} el
  * @return {boolean}
  * @private
  */
-MdPanelPosition.prototype._isOnscreen = function(panelEl) {
+MdPanelPosition.prototype._isOnscreen = function(el) {
   // this works because we always use fixed positioning for the panel,
   // which is relative to the viewport.
   var left = parseInt(this.getLeft());
@@ -2941,13 +2958,13 @@ MdPanelPosition.prototype._isOnscreen = function(panelEl) {
 
   if (this._translateX.length || this._translateY.length) {
     var prefixedTransform = this._$mdConstant.CSS.TRANSFORM;
-    var offsets = getComputedTranslations(panelEl, prefixedTransform);
+    var offsets = getComputedTranslations(el, prefixedTransform);
     left += offsets.x;
     top += offsets.y;
   }
 
-  var right = left + panelEl[0].offsetWidth;
-  var bottom = top + panelEl[0].offsetHeight;
+  var right = left + el[0].offsetWidth;
+  var bottom = top + el[0].offsetHeight;
 
   return (left >= 0) &&
     (top >= 0) &&
@@ -2987,53 +3004,53 @@ MdPanelPosition.prototype._reduceTranslateValues =
 /**
  * Sets the panel position based on the created panel element and best x/y
  * positioning.
- * @param {!angular.JQLite} panelEl
+ * @param {!angular.JQLite} el
  * @private
  */
-MdPanelPosition.prototype._setPanelPosition = function(panelEl) {
-  // Remove the "position adjusted" class in case it has been added before.
-  panelEl.removeClass('_md-panel-position-adjusted');
+MdPanelPosition.prototype._setPanelPosition = function(el) {
+  // Remove the class in case it has been added before.
+  el.removeClass('_md-panel-position-adjusted');
 
   // Only calculate the position if necessary.
   if (this._absolute) {
-    this._setTransform(panelEl);
+    this._setTransform(el);
     return;
   }
 
   if (this._actualPosition) {
-    this._calculatePanelPosition(panelEl, this._actualPosition);
-    this._setTransform(panelEl);
-    this._constrainToViewport(panelEl);
+    this._calculatePanelPosition(el, this._actualPosition);
+    this._setTransform(el);
+    this._constrainToViewport(el);
     return;
   }
 
   for (var i = 0; i < this._positions.length; i++) {
     this._actualPosition = this._positions[i];
-    this._calculatePanelPosition(panelEl, this._actualPosition);
-    this._setTransform(panelEl);
+    this._calculatePanelPosition(el, this._actualPosition);
+    this._setTransform(el);
 
-    if (this._isOnscreen(panelEl)) {
+    if (this._isOnscreen(el)) {
       return;
     }
   }
 
-  this._constrainToViewport(panelEl);
+  this._constrainToViewport(el);
 };
 
 
 /**
  * Constrains a panel's position to the viewport.
- * @param {!angular.JQLite} panelEl
+ * @param {!angular.JQLite} el
  * @private
  */
-MdPanelPosition.prototype._constrainToViewport = function(panelEl) {
+MdPanelPosition.prototype._constrainToViewport = function(el) {
   var margin = MdPanelPosition.viewportMargin;
   var initialTop = this._top;
   var initialLeft = this._left;
 
   if (this.getTop()) {
     var top = parseInt(this.getTop());
-    var bottom = panelEl[0].offsetHeight + top;
+    var bottom = el[0].offsetHeight + top;
     var viewportHeight = this._$window.innerHeight;
 
     if (top < margin) {
@@ -3045,7 +3062,7 @@ MdPanelPosition.prototype._constrainToViewport = function(panelEl) {
 
   if (this.getLeft()) {
     var left = parseInt(this.getLeft());
-    var right = panelEl[0].offsetWidth + left;
+    var right = el[0].offsetWidth + left;
     var viewportWidth = this._$window.innerWidth;
 
     if (left < margin) {
@@ -3056,7 +3073,7 @@ MdPanelPosition.prototype._constrainToViewport = function(panelEl) {
   }
 
   // Class that can be used to re-style the panel if it was repositioned.
-  panelEl.toggleClass(
+  el.toggleClass(
     '_md-panel-position-adjusted',
     this._top !== initialTop || this._left !== initialLeft
   );
@@ -3095,15 +3112,15 @@ MdPanelPosition.prototype._bidi = function(position) {
 /**
  * Calculates the panel position based on the created panel element and the
  * provided positioning.
- * @param {!angular.JQLite} panelEl
+ * @param {!angular.JQLite} el
  * @param {!{x:string, y:string}} position
  * @private
  */
-MdPanelPosition.prototype._calculatePanelPosition = function(panelEl, position) {
+MdPanelPosition.prototype._calculatePanelPosition = function(el, position) {
 
-  var panelBounds = panelEl[0].getBoundingClientRect();
-  var panelWidth = Math.max(panelBounds.width, panelEl[0].clientWidth);
-  var panelHeight = Math.max(panelBounds.height, panelEl[0].clientHeight);
+  var panelBounds = el[0].getBoundingClientRect();
+  var panelWidth = Math.max(panelBounds.width, el[0].clientWidth);
+  var panelHeight = Math.max(panelBounds.height, el[0].clientHeight);
 
   var targetBounds = this._relativeToEl[0].getBoundingClientRect();
 
diff --git a/src/components/panel/panel.scss b/src/components/panel/panel.scss
index 1dce9f9f4b0..e9be4d91952 100644
--- a/src/components/panel/panel.scss
+++ b/src/components/panel/panel.scss
@@ -6,21 +6,16 @@
   width: 100%;
 }
 
-._md-panel-hidden {
-  display: none;
+.md-panel-inner-wrapper {
+  position: fixed;
 }
 
 ._md-panel-offscreen {
   left: -9999px;
 }
 
-._md-panel-fullscreen {
-  border-radius: 0;
-  left: 0;
-  min-height: 100%;
-  min-width: 100%;
-  position: fixed;
-  top: 0;
+._md-panel-hidden {
+  display: none;
 }
 
 // Only used when no animations are present.
@@ -31,7 +26,7 @@
 
 .md-panel {
   opacity: 0;
-  position: fixed;
+  position: relative;
 
   &._md-panel-shown {
     // Only used when custom animations are present.
@@ -57,7 +52,7 @@
 
   &._md-panel-backdrop {
     height: 100%;
-    position: absolute;
+    position: fixed;
     width: 100%;
   }
 
@@ -70,3 +65,12 @@
     transition: opacity $material-leave-duration $material-leave-timing-function;
   }
 }
+
+._md-panel-fullscreen {
+  border-radius: 0;
+  left: 0;
+  min-height: 100%;
+  min-width: 100%;
+  position: fixed;
+  top: 0;
+}
diff --git a/src/components/panel/panel.spec.js b/src/components/panel/panel.spec.js
index 0afe1bf84a7..c641486b7aa 100644
--- a/src/components/panel/panel.spec.js
+++ b/src/components/panel/panel.spec.js
@@ -7,6 +7,8 @@ describe('$mdPanel', function() {
   var PANEL_WRAPPER_CLASS = 'md-panel-outer-wrapper';
   var PANEL_EL = '.md-panel';
   var PANEL_EL_CLASS = 'md-panel';
+  var INNER_WRAPPER = '.md-panel-inner-wrapper';
+  var INNER_WRAPPER_CLASS = 'md-panel-inner-wrapper';
   var HIDDEN_CLASS = '_md-panel-hidden';
   var FOCUS_TRAPS_CLASS = '._md-panel-focus-trap';
   var FULLSCREEN_CLASS = '_md-panel-fullscreen';
@@ -2009,6 +2011,25 @@ describe('$mdPanel', function() {
         expect(middleOfPanel)
             .toBeApproximately(middleOfPage + parseInt(offset));
       });
+
+      it('should apply offsets to the panel inner wrapper, instead of directly ' +
+        'on the panel element', function() {
+        var position = mdPanelPosition
+            .absolute()
+            .withOffsetX('-10px');
+
+        config['position'] = position;
+
+        openPanel(config);
+
+        var transform = $mdConstant.CSS.TRANSFORM;
+        var panelEl = document.querySelector(PANEL_EL);
+        var innerWrapper = document.querySelector(INNER_WRAPPER);
+
+        expect(panelEl.style[transform]).toBeFalsy();
+        expect(innerWrapper.style[transform]).toBeTruthy();
+        expect(panelEl.parentNode).toBe(innerWrapper);
+      });
     });
 
     describe('should absolutely position the panel at', function() {
@@ -2019,7 +2040,7 @@ describe('$mdPanel', function() {
 
         openPanel(config);
 
-        var panelCss = document.querySelector(PANEL_EL).style;
+        var panelCss = document.querySelector(INNER_WRAPPER).style;
         expect(panelCss.top).toEqual(top);
       });
 
@@ -2029,7 +2050,7 @@ describe('$mdPanel', function() {
 
         openPanel(config);
 
-        var panelCss = document.querySelector(PANEL_EL).style;
+        var panelCss = document.querySelector(INNER_WRAPPER).style;
         expect(panelCss.top).toEqual('0px');
       });
 
@@ -2039,7 +2060,7 @@ describe('$mdPanel', function() {
 
         openPanel(config);
 
-        var panelCss = document.querySelector(PANEL_EL).style;
+        var panelCss = document.querySelector(INNER_WRAPPER).style;
         expect(panelCss.bottom).toEqual('')
         expect(panelCss.top).toEqual('0px');
       });
@@ -2051,7 +2072,7 @@ describe('$mdPanel', function() {
 
         openPanel(config);
 
-        var panelCss = document.querySelector(PANEL_EL).style;
+        var panelCss = document.querySelector(INNER_WRAPPER).style;
         expect(panelCss.bottom).toEqual(bottom);
       });
 
@@ -2061,7 +2082,7 @@ describe('$mdPanel', function() {
 
         openPanel(config);
 
-        var panelCss = document.querySelector(PANEL_EL).style;
+        var panelCss = document.querySelector(INNER_WRAPPER).style;
         expect(panelCss.bottom).toEqual('0px');
       });
 
@@ -2071,7 +2092,7 @@ describe('$mdPanel', function() {
 
         openPanel(config);
 
-        var panelCss = document.querySelector(PANEL_EL).style;
+        var panelCss = document.querySelector(INNER_WRAPPER).style;
         expect(panelCss.top).toEqual('');
         expect(panelCss.bottom).toEqual('0px');
       });
@@ -2083,7 +2104,7 @@ describe('$mdPanel', function() {
 
         openPanel(config);
 
-        var panelCss = document.querySelector(PANEL_EL).style;
+        var panelCss = document.querySelector(INNER_WRAPPER).style;
         expect(panelCss.left).toEqual(left);
       });
 
@@ -2093,7 +2114,7 @@ describe('$mdPanel', function() {
 
         openPanel(config);
 
-        var panelCss = document.querySelector(PANEL_EL).style;
+        var panelCss = document.querySelector(INNER_WRAPPER).style;
         expect(panelCss.left).toEqual('0px');
       });
 
@@ -2103,7 +2124,7 @@ describe('$mdPanel', function() {
 
         openPanel(config);
 
-        var panelCss = document.querySelector(PANEL_EL).style;
+        var panelCss = document.querySelector(INNER_WRAPPER).style;
         expect(panelCss.right).toEqual('');
         expect(panelCss.left).toEqual('0px');
       });
@@ -2115,7 +2136,7 @@ describe('$mdPanel', function() {
 
         openPanel(config);
 
-        var panelCss = document.querySelector(PANEL_EL).style;
+        var panelCss = document.querySelector(INNER_WRAPPER).style;
         expect(panelCss.right).toEqual(right);
       });
 
@@ -2125,7 +2146,7 @@ describe('$mdPanel', function() {
 
         openPanel(config);
 
-        var panelCss = document.querySelector(PANEL_EL).style;
+        var panelCss = document.querySelector(INNER_WRAPPER).style;
         expect(panelCss.right).toEqual('0px');
       });
 
@@ -2135,7 +2156,7 @@ describe('$mdPanel', function() {
 
         openPanel(config);
 
-        var panelCss = document.querySelector(PANEL_EL).style;
+        var panelCss = document.querySelector(INNER_WRAPPER).style;
         expect(panelCss.left).toEqual('');
         expect(panelCss.right).toEqual('0px');
       });
@@ -2146,7 +2167,7 @@ describe('$mdPanel', function() {
 
         openPanel(config);
 
-        var panelCss = document.querySelector(PANEL_EL).style;
+        var panelCss = document.querySelector(INNER_WRAPPER).style;
         expect(panelCss.left).toEqual(start);
       });
 
@@ -2158,7 +2179,7 @@ describe('$mdPanel', function() {
 
         openPanel(config);
 
-        var panelCss = document.querySelector(PANEL_EL).style;
+        var panelCss = document.querySelector(INNER_WRAPPER).style;
         expect(panelCss.right).toEqual(start);
       });
 
@@ -2168,7 +2189,7 @@ describe('$mdPanel', function() {
 
         openPanel(config);
 
-        var panelCss = document.querySelector(PANEL_EL).style;
+        var panelCss = document.querySelector(INNER_WRAPPER).style;
         expect(panelCss.right).toEqual(end);
       });
 
@@ -2180,7 +2201,7 @@ describe('$mdPanel', function() {
 
         openPanel(config);
 
-        var panelCss = document.querySelector(PANEL_EL).style;
+        var panelCss = document.querySelector(INNER_WRAPPER).style;
         expect(panelCss.left).toEqual(end);
       });
 
@@ -2192,7 +2213,7 @@ describe('$mdPanel', function() {
 
         var middleOfPage = 0.5 * window.innerWidth;
 
-        var panelRect = document.querySelector(PANEL_EL)
+        var panelRect = document.querySelector(INNER_WRAPPER)
             .getBoundingClientRect();
         var middleOfPanel = panelRect.left + 0.5 * panelRect.width;
 
@@ -2207,7 +2228,7 @@ describe('$mdPanel', function() {
 
         var middleOfPage = 0.5 * window.innerHeight;
 
-        var panelRect = document.querySelector(PANEL_EL)
+        var panelRect = document.querySelector(INNER_WRAPPER)
             .getBoundingClientRect();
         var middleOfPanel = panelRect.top + 0.5 * panelRect.height;
 
@@ -2223,7 +2244,7 @@ describe('$mdPanel', function() {
         var middleOfPageX = 0.5 * window.innerWidth;
         var middleOfPageY = 0.5 * window.innerHeight;
 
-        var panelRect = document.querySelector(PANEL_EL)
+        var panelRect = document.querySelector(INNER_WRAPPER)
             .getBoundingClientRect();
         var middleOfPanelX = panelRect.left + 0.5 * panelRect.width;
         var middleOfPanelY = panelRect.top + 0.5 * panelRect.height;
@@ -2259,7 +2280,7 @@ describe('$mdPanel', function() {
 
         openPanel(config);
 
-        var panelCss = document.querySelector(PANEL_EL).style;
+        var panelCss = document.querySelector(INNER_WRAPPER).style;
         expect(panelCss.left).toBeApproximately(myButtonRect.left);
         expect(panelCss.top).toBeApproximately(myButtonRect.top);
       });
@@ -2273,7 +2294,7 @@ describe('$mdPanel', function() {
 
         openPanel(config);
 
-        var panelCss = document.querySelector(PANEL_EL).style;
+        var panelCss = document.querySelector(INNER_WRAPPER).style;
         expect(panelCss.left).toBeApproximately(myButtonRect.left);
         expect(panelCss.top).toBeApproximately(myButtonRect.top);
       });
@@ -2287,7 +2308,7 @@ describe('$mdPanel', function() {
 
         openPanel(config);
 
-        var panelCss = document.querySelector(PANEL_EL).style;
+        var panelCss = document.querySelector(INNER_WRAPPER).style;
         expect(panelCss.left).toBeApproximately(myButtonRect.left);
         expect(panelCss.top).toBeApproximately(myButtonRect.top);
       });
@@ -2313,7 +2334,7 @@ describe('$mdPanel', function() {
             y: yPosition.ALIGN_TOPS,
           });
 
-          var panelCss = document.querySelector(PANEL_EL).style;
+          var panelCss = document.querySelector(INNER_WRAPPER).style;
           expect(panelCss.left).toBeApproximately(myButtonRect.left);
           expect(panelCss.top).toBeApproximately(myButtonRect.top);
         });
@@ -2504,8 +2525,8 @@ describe('$mdPanel', function() {
           panelRef.open();
           flushPanel();
 
-          expect(panelRef.panelEl[0].offsetLeft).toBe(VIEWPORT_MARGIN);
-          expect(panelRef.panelEl[0]).toHaveClass(ADJUSTED_CLASS);
+          expect(panelRef.innerWrapper[0].offsetLeft).toBe(VIEWPORT_MARGIN);
+          expect(panelRef.innerWrapper).toHaveClass(ADJUSTED_CLASS);
 
           panelRef.close();
           flushPanel();
@@ -2513,8 +2534,8 @@ describe('$mdPanel', function() {
           panelRef.open();
           flushPanel();
 
-          expect(panelRef.panelEl[0].offsetLeft).toBe(VIEWPORT_MARGIN);
-          expect(panelRef.panelEl[0]).toHaveClass(ADJUSTED_CLASS);
+          expect(panelRef.innerWrapper[0].offsetLeft).toBe(VIEWPORT_MARGIN);
+          expect(panelRef.innerWrapper).toHaveClass(ADJUSTED_CLASS);
 
           panelRef.destroy();
         });
@@ -2529,7 +2550,7 @@ describe('$mdPanel', function() {
 
           openPanel(config);
 
-          var panelRect = document.querySelector(PANEL_EL)
+          var panelRect = document.querySelector(INNER_WRAPPER)
               .getBoundingClientRect();
           expect(panelRect.bottom).toBeApproximately(myButtonRect.top);
         });
@@ -2543,7 +2564,7 @@ describe('$mdPanel', function() {
 
           openPanel(config);
 
-          var panelRect = document.querySelector(PANEL_EL)
+          var panelRect = document.querySelector(INNER_WRAPPER)
               .getBoundingClientRect();
           expect(panelRect.top).toBeApproximately(myButtonRect.top);
         });
@@ -2558,7 +2579,7 @@ describe('$mdPanel', function() {
           openPanel(config);
 
           var middleOfButton = myButtonRect.top + 0.5 * myButtonRect.height;
-          var panelRect = document.querySelector(PANEL_EL)
+          var panelRect = document.querySelector(INNER_WRAPPER)
               .getBoundingClientRect();
           var middleOfPanel = panelRect.top + 0.5 * panelRect.height;
 
@@ -2574,7 +2595,7 @@ describe('$mdPanel', function() {
 
           openPanel(config);
 
-          var panelRect = document.querySelector(PANEL_EL)
+          var panelRect = document.querySelector(INNER_WRAPPER)
               .getBoundingClientRect();
           expect(panelRect.bottom).toBeApproximately(myButtonRect.bottom);
         });
@@ -2588,7 +2609,7 @@ describe('$mdPanel', function() {
 
           openPanel(config);
 
-          var panelRect = document.querySelector(PANEL_EL)
+          var panelRect = document.querySelector(INNER_WRAPPER)
               .getBoundingClientRect();
           expect(panelRect.top).toBeApproximately(myButtonRect.bottom);
         });
@@ -2608,7 +2629,7 @@ describe('$mdPanel', function() {
 
           openPanel(config);
 
-          var panel = document.querySelector(PANEL_EL);
+          var panel = document.querySelector(INNER_WRAPPER);
 
           expect(panel.offsetLeft).toBe(VIEWPORT_MARGIN);
           expect(panel).toHaveClass(ADJUSTED_CLASS);
@@ -2629,7 +2650,7 @@ describe('$mdPanel', function() {
 
           openPanel(config);
 
-          var panel = document.querySelector(PANEL_EL);
+          var panel = document.querySelector(INNER_WRAPPER);
           var panelRect = panel.getBoundingClientRect();
 
           expect(panelRect.left + panelRect.width).toBeLessThan(window.innerWidth);
@@ -2647,7 +2668,7 @@ describe('$mdPanel', function() {
 
           openPanel(config);
 
-          var panelRect = document.querySelector(PANEL_EL)
+          var panelRect = document.querySelector(INNER_WRAPPER)
               .getBoundingClientRect();
           expect(panelRect.right).toBeApproximately(myButtonRect.left);
         });
@@ -2661,7 +2682,7 @@ describe('$mdPanel', function() {
 
           openPanel(config);
 
-          var panelRect = document.querySelector(PANEL_EL)
+          var panelRect = document.querySelector(INNER_WRAPPER)
               .getBoundingClientRect();
           expect(panelRect.right).toBeApproximately(myButtonRect.right);
         });
@@ -2676,7 +2697,7 @@ describe('$mdPanel', function() {
           openPanel(config);
 
           var middleOfButton = myButtonRect.left + 0.5 * myButtonRect.width;
-          var panelRect = document.querySelector(PANEL_EL)
+          var panelRect = document.querySelector(INNER_WRAPPER)
               .getBoundingClientRect();
           var middleOfPanel = panelRect.left + 0.5 * panelRect.width;
 
@@ -2692,7 +2713,7 @@ describe('$mdPanel', function() {
 
           openPanel(config);
 
-          var panelRect = document.querySelector(PANEL_EL)
+          var panelRect = document.querySelector(INNER_WRAPPER)
               .getBoundingClientRect();
           expect(panelRect.left).toBeApproximately(myButtonRect.left);
         });
@@ -2706,7 +2727,7 @@ describe('$mdPanel', function() {
 
           openPanel(config);
 
-          var panelRect = document.querySelector(PANEL_EL)
+          var panelRect = document.querySelector(INNER_WRAPPER)
               .getBoundingClientRect();
           expect(panelRect.left).toBeApproximately(myButtonRect.right);
         });
@@ -2726,7 +2747,7 @@ describe('$mdPanel', function() {
 
           openPanel(config);
 
-          var panel = document.querySelector(PANEL_EL);
+          var panel = document.querySelector(INNER_WRAPPER);
 
           expect(panel.offsetTop).toBe(VIEWPORT_MARGIN);
           expect(panel).toHaveClass(ADJUSTED_CLASS);
@@ -2747,7 +2768,7 @@ describe('$mdPanel', function() {
 
           openPanel(config);
 
-          var panel = document.querySelector(PANEL_EL);
+          var panel = document.querySelector(INNER_WRAPPER);
           var panelRect = panel.getBoundingClientRect();
 
           expect(panelRect.top + panelRect.height).toBeLessThan(window.innerHeight);
@@ -2768,7 +2789,7 @@ describe('$mdPanel', function() {
 
             openPanel(config);
 
-            var panelRect = document.querySelector(PANEL_EL)
+            var panelRect = document.querySelector(INNER_WRAPPER)
               .getBoundingClientRect();
             expect(panelRect.left).toBeApproximately(myButtonRect.right);
           });
@@ -2782,7 +2803,7 @@ describe('$mdPanel', function() {
 
             openPanel(config);
 
-            var panelRect = document.querySelector(PANEL_EL)
+            var panelRect = document.querySelector(INNER_WRAPPER)
               .getBoundingClientRect();
             expect(panelRect.left).toBeApproximately(myButtonRect.left);
           });
@@ -2796,7 +2817,7 @@ describe('$mdPanel', function() {
 
             openPanel(config);
 
-            var panelRect = document.querySelector(PANEL_EL)
+            var panelRect = document.querySelector(INNER_WRAPPER)
               .getBoundingClientRect();
             expect(panelRect.right).toBeApproximately(myButtonRect.right);
           });
@@ -2810,7 +2831,7 @@ describe('$mdPanel', function() {
 
             openPanel(config);
 
-            var panelRect = document.querySelector(PANEL_EL)
+            var panelRect = document.querySelector(INNER_WRAPPER)
               .getBoundingClientRect();
             expect(panelRect.right).toBeApproximately(myButtonRect.left);
           });
@@ -3243,9 +3264,13 @@ describe('$mdPanel', function() {
         openPanel(config);
 
         expect(panelRef.panelEl.parent())
+          .toHaveClass(INNER_WRAPPER_CLASS);
+
+        expect(panelRef.panelEl.parent().parent())
           .toHaveClass(PANEL_WRAPPER_CLASS);
 
-        expect(panelRef.panelContainer[0]).toBe(config.contentElement.parent()[0]);
+        expect(panelRef.innerWrapper[0]).toBe(config.contentElement.parent()[0]);
+        expect(panelRef.panelContainer[0]).toBe(config.contentElement.parent().parent()[0]);
       });
 
     it('should add the proper class to the panel element and assign ' +
@@ -3273,13 +3298,16 @@ describe('$mdPanel', function() {
 
     it('should clear out any panel-specific inline styles from the element',
       function() {
-        openPanel(config);
 
-        expect(config.contentElement.attr('style')).toBeTruthy();
+        config.contentElement.css('color', 'red');
+
+        var initialStyles = config.contentElement.attr('style');
+
+        openPanel(config);
 
         closePanel();
 
-        expect(config.contentElement.attr('style')).toBeFalsy();
+        expect(config.contentElement.attr('style')).toBe(initialStyles);
       });
 
     it('should clean up the panel via the cleanup function from the compiler',