Panel: Fix for Android zoom issue.

jquery-archive · Jan 14, 2013 · 04f52f4 · 04f52f4
1 parent 73c820f
commit 04f52f4
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/css/structure/jquery.mobile.panel.css b/css/structure/jquery.mobile.panel.css
@@ -163,8 +163,8 @@
 	left: 0;
 }
 
-/* while open, page x overflow is disabled */
-.ui-page-active.ui-page-panel-open {
+/* always disable overflow-x to prevent zoom issue on Android */
+.ui-page-active.ui-page-panel {
 	overflow-x: hidden;
 }
 

diff --git a/js/widgets/panel.js b/js/widgets/panel.js
@@ -19,6 +19,7 @@ $.widget( "mobile.panel", $.mobile.widget, {
 			panelInner: "ui-panel-inner",
 			modal: "ui-panel-dismiss",
 			modalOpen: "ui-panel-dismiss-open",
+			pagePanel: "ui-page-panel",
 			pagePanelOpen: "ui-page-panel-open",
 			contentWrap: "ui-panel-content-wrap",
 			contentWrapOpen: "ui-panel-content-wrap-open",
@@ -93,6 +94,9 @@ $.widget( "mobile.panel", $.mobile.widget, {
 		self._wrapper.addClass( this.options.classes.contentWrapClosed );
 		self._fixedToolbar.addClass( this.options.classes.contentFixedToolbarClosed );
 
+		// add class to page so we can set "overflow-x: hidden;" for it to fix Android zoom issue
+		self._page.addClass( self.options.classes.pagePanel );
+
 		// if animating, add the class to do so
 		if ( $.support.cssTransform3d && !!self.options.animate ) {
 			this.element.addClass( self.options.classes.animate );