In order to have flexibility in where we place panels, we need to make

the main content wrap have a 3dtransform class

Author: jefflembeck

css/structure/jquery.mobile.panel.css

@@ -163,15 +163,15 @@
 }
 
 /* dismiss and content wrap open positions */
-.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal, 
+.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal,
 .ui-panel-dismiss-open.ui-panel-dismiss-display-reveal,
-.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push, 
+.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push,
 .ui-panel-dismiss-open.ui-panel-dismiss-display-push,
 .ui-panel-dismiss-open.ui-panel-dismiss-display-overlay {
 	left: 17em;
 }
-.ui-panel-3dtransforms ~.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal, 
-.ui-panel-3dtransforms ~.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push {
+.ui-panel-3dtransforms.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal,
+.ui-panel-3dtransforms.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push {
 	-webkit-transform: translateX(17em);
 	-moz-transform: translateX(17em);
 	-ms-transform: translateX(17em);
@@ -209,4 +209,4 @@
 	.ui-responsive-panel .ui-panel-dismiss-display-push {
 		display: none;
 	}
-}
+}

js/widgets/panel.js

@@ -51,6 +51,9 @@ $.widget( "mobile.panel", $.mobile.widget, {
 				var $wrapper = self._page.find( "." + self.options.classes.contentWrap );
 				if( $wrapper.length === 0 ){
 					$wrapper = self._page.find( ".ui-header, .ui-content, .ui-footer" ).wrapAll( '<div class="' + self.options.classes.contentWrap + '" />' ).parent();
+					if( $.support.cssTransform3d && !!self.options.positionFixed ) {
+						$wrapper.addClass( self.options.classes.cssTransform3d );
+					}
 				}
 				return $wrapper;
 			};
@@ -216,6 +219,7 @@ $.widget( "mobile.panel", $.mobile.widget, {
 					self._positionPanel();
 					self._bindFixListener();
 					self._trigger( "open" );
+					console.log( "fired" );
 				};
 
 			if( this.element.closest( ".ui-page-active" ).length < 0 ){