Make the responsive layout behave better when the user zooms the page:

* Change the smartphone media query from 480 to 600px so it captures large screen phones in landscape mode.
* Set #wpadminbar to position: absolute at smartphone sizes so it scrolls with the page, freeing up the viewport.
* Remove the transition states on #adminmenu for better performance on mobile devices
* Make the responsive sidebar scroll with the page instead of using a fixed position
* Remove the -webkit-overflow-scrolling rule that was disabling scroll-to-top when tapping the iOS status bar.
* Remove unnecessary zoom declaration from -ms-viewport.

See #25858.


Built from https://develop.svn.wordpress.org/trunk@26373


git-svn-id: http://core.svn.wordpress.org/trunk@26273 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/wp-admin-rtl.css

@@ -10852,8 +10852,6 @@ li#wp-admin-bar-toggle-button {
 
 @-ms-viewport {
 	width: device-width;
-	zoom: 1;
-	user-zoom: fixed;
 }
 
 @media screen and ( max-width: 782px ) {
@@ -11020,7 +11018,6 @@ li#wp-admin-bar-toggle-button {
 	.auto-fold #adminmenuback,
 	.auto-fold #adminmenuwrap {
 		position: absolute;
-		top: 0;
 		right: 0;
 		z-index: 100;
 	}
@@ -11039,28 +11036,7 @@ li#wp-admin-bar-toggle-button {
 	.auto-fold #adminmenu li.menu-top {
 		width: 100%;
 	}
-
-	/* Let the menubar scroll independently of the main column */
-	.auto-fold #adminmenuwrap {
-		height: 100%;
-		position: fixed;
-		overflow: hidden;
-		overflow-y: scroll;
-		top: 46px;
-
-		height: -webkit-calc(100% - 46px);
-		height: calc(100% - 46px);
-
-		-webkit-box-shadow: inset 2px 0 0 rgba(0, 0, 0, .1);
-		box-shadow: inset 2px 0 0 rgba(0, 0, 0, .1);
-
-		-moz-box-sizing: border-box;
-		-webkit-box-sizing: border-box;
-		box-sizing: border-box;
-
-		-webkit-overflow-scrolling: touch;
-	}
-
+	
 	/* Experimental animations for sidebar */
 	.auto-fold #adminmenu,
 	.auto-fold #adminmenuback,
@@ -11070,26 +11046,6 @@ li#wp-admin-bar-toggle-button {
 		transition: right .05s ease-in-out;
 	}
 
-	#wpbody {
-		-moz-transition: left .05s ease-in-out;
-		-webkit-transition: left .05s ease-in-out;
-		transition: left .05s ease-in-out;
-	}
-
-	.auto-fold #adminmenu {
-		-webkit-opacity: .10;
-		-moz-opacity: .10;
-		opacity: .10;
-		-moz-transition: right .05s ease-in-out, -moz-opacity .3s ease-in;
-		-webkit-transition: right .05s ease-in-out, -webkit-opacity .3s ease-in;
-		transition: right .05s ease-in-out, opacity .3s ease-in;
-	}
-
-	.auto-fold .moby6-open #adminmenu {
-		-moz-opacity: 1;
-		-webkit-opacity: 1;
-		opacity: 1;
-	}
 
 	/* Resize the admin menu items to a comfortable touch size */
 	.auto-fold #adminmenu li a {
@@ -12244,7 +12200,15 @@ li#wp-admin-bar-toggle-button {
 }
 
 /* Smartphone */
-@media screen and (max-width: 480px) {
+@media screen and (max-width: 600px) {
+	html.wp-toolbar {
+		padding-top: 0;
+	}
+
+	.auto-fold #adminmenu {
+		top: 46px;
+	}
+	
 	#moby6-overlay {
 		position: fixed;
 		top: 0;

wp-admin/css/wp-admin.css

@@ -10852,8 +10852,6 @@ li#wp-admin-bar-toggle-button {
 
 @-ms-viewport {
 	width: device-width;
-	zoom: 1;
-	user-zoom: fixed;
 }
 
 @media screen and ( max-width: 782px ) {
@@ -11020,7 +11018,6 @@ li#wp-admin-bar-toggle-button {
 	.auto-fold #adminmenuback,
 	.auto-fold #adminmenuwrap {
 		position: absolute;
-		top: 0;
 		left: 0;
 		z-index: 100;
 	}
@@ -11039,28 +11036,7 @@ li#wp-admin-bar-toggle-button {
 	.auto-fold #adminmenu li.menu-top {
 		width: 100%;
 	}
-
-	/* Let the menubar scroll independently of the main column */
-	.auto-fold #adminmenuwrap {
-		height: 100%;
-		position: fixed;
-		overflow: hidden;
-		overflow-y: scroll;
-		top: 46px;
-
-		height: -webkit-calc(100% - 46px);
-		height: calc(100% - 46px);
-
-		-webkit-box-shadow: inset 2px 0 0 rgba(0, 0, 0, .1);
-		box-shadow: inset 2px 0 0 rgba(0, 0, 0, .1);
-
-		-moz-box-sizing: border-box;
-		-webkit-box-sizing: border-box;
-		box-sizing: border-box;
-
-		-webkit-overflow-scrolling: touch;
-	}
-
+	
 	/* Experimental animations for sidebar */
 	.auto-fold #adminmenu,
 	.auto-fold #adminmenuback,
@@ -11070,26 +11046,6 @@ li#wp-admin-bar-toggle-button {
 		transition: left .05s ease-in-out;
 	}
 
-	#wpbody {
-		-moz-transition: right .05s ease-in-out;
-		-webkit-transition: right .05s ease-in-out;
-		transition: right .05s ease-in-out;
-	}
-
-	.auto-fold #adminmenu {
-		-webkit-opacity: .10;
-		-moz-opacity: .10;
-		opacity: .10;
-		-moz-transition: left .05s ease-in-out, -moz-opacity .3s ease-in;
-		-webkit-transition: left .05s ease-in-out, -webkit-opacity .3s ease-in;
-		transition: left .05s ease-in-out, opacity .3s ease-in;
-	}
-
-	.auto-fold .moby6-open #adminmenu {
-		-moz-opacity: 1;
-		-webkit-opacity: 1;
-		opacity: 1;
-	}
 
 	/* Resize the admin menu items to a comfortable touch size */
 	.auto-fold #adminmenu li a {
@@ -12244,7 +12200,15 @@ li#wp-admin-bar-toggle-button {
 }
 
 /* Smartphone */
-@media screen and (max-width: 480px) {
+@media screen and (max-width: 600px) {
+	html.wp-toolbar {
+		padding-top: 0;
+	}
+
+	.auto-fold #adminmenu {
+		top: 46px;
+	}
+	
 	#moby6-overlay {
 		position: fixed;
 		top: 0;

wp-includes/css/admin-bar-rtl.css

@@ -938,15 +938,12 @@
 	}
 }
 
-/* Horizontal */
-@media screen and (max-width: 480px) and (orientation: landscape) {
+/* Smartphone */
+@media screen and (max-width: 600px) {
 	#wpadminbar {
 		position: absolute;
 	}
-}
-
-/* Smartphone */
-@media screen and (max-width: 480px) {
+	
 	#moby6-overlay {
 		position: fixed;
 		top: 0;

wp-includes/css/admin-bar.css

@@ -938,15 +938,12 @@
 	}
 }
 
-/* Horizontal */
-@media screen and (max-width: 480px) and (orientation: landscape) {
+/* Smartphone */
+@media screen and (max-width: 600px) {
 	#wpadminbar {
 		position: absolute;
 	}
-}
-
-/* Smartphone */
-@media screen and (max-width: 480px) {
+	
 	#moby6-overlay {
 		position: fixed;
 		top: 0;