Transitions: Use translate3D instead of translateX for slide transition. Fix for iOS 6. Adresses jquery-archive#5764.

jaspermdegroot · jaspermdegroot · commit cf3a07a3d527 · 2013-03-31T13:32:45.000+02:00
diff --git a/css/structure/jquery.mobile.transition.slide.css b/css/structure/jquery.mobile.transition.slide.css
@@ -10,7 +10,7 @@
 	animation-duration: 350ms;
 }
 .slide.out {
-	-webkit-transform: translateX(-100%);
+	-webkit-transform: translate3d(-100%,0,0);
 	-webkit-animation-name: slideouttoleft;
 	-moz-transform: translateX(-100%);
 	-moz-animation-name: slideouttoleft;
@@ -19,7 +19,7 @@
 }
 
 .slide.in {
-	-webkit-transform: translateX(0);
+	-webkit-transform: translate3d(0,0,0);
 	-webkit-animation-name: slideinfromright;
 	-moz-transform: translateX(0);
 	-moz-animation-name: slideinfromright;
@@ -28,7 +28,7 @@
 }
 
 .slide.out.reverse {
-	-webkit-transform: translateX(100%);
+	-webkit-transform: translate3d(100%,0,0);
 	-webkit-animation-name: slideouttoright;
 	-moz-transform: translateX(100%);
 	-moz-animation-name: slideouttoright;
@@ -37,7 +37,7 @@
 }
 
 .slide.in.reverse {
-	-webkit-transform: translateX(0);
+	-webkit-transform: translate3d(0,0,0);
 	-webkit-animation-name: slideinfromleft;
 	-moz-transform: translateX(0);
 	-moz-animation-name: slideinfromleft;
diff --git a/css/structure/jquery.mobile.transition.slidein.keyframes.css b/css/structure/jquery.mobile.transition.slidein.keyframes.css
@@ -1,7 +1,7 @@
 /* keyframes for slidein from sides */
 @-webkit-keyframes slideinfromright {
-    from { -webkit-transform: translateX(100%); }
-    to { -webkit-transform: translateX(0); }
+    from { -webkit-transform: translate3d(100%,0,0); }
+    to { -webkit-transform: translate3d(0,0,0); }
 }
 @-moz-keyframes slideinfromright {
     from { -moz-transform: translateX(100%); }
@@ -13,8 +13,8 @@
 }
 
 @-webkit-keyframes slideinfromleft {
-    from { -webkit-transform: translateX(-100%); }
-    to { -webkit-transform: translateX(0); }
+    from { -webkit-transform: translate3d(-100%,0,0); }
+    to { -webkit-transform: translate3d(0,0,0); }
 }
 @-moz-keyframes slideinfromleft {
     from { -moz-transform: translateX(-100%); }
diff --git a/css/structure/jquery.mobile.transition.slideout.keyframes.css b/css/structure/jquery.mobile.transition.slideout.keyframes.css
@@ -1,7 +1,7 @@
 /* keyframes for slideout to sides */
 @-webkit-keyframes slideouttoleft {
-    from { -webkit-transform: translateX(0); }
-    to { -webkit-transform: translateX(-100%); }
+    from { -webkit-transform: translate3d(0,0,0); }
+    to { -webkit-transform: translate3d(-100%,0,0); }
 }
 @-moz-keyframes slideouttoleft {
     from { -moz-transform: translateX(0); }
@@ -13,8 +13,8 @@
 }
 
 @-webkit-keyframes slideouttoright {
-    from { -webkit-transform: translateX(0); }
-    to { -webkit-transform: translateX(100%); }
+    from { -webkit-transform: translate3d(0,0,0); }
+    to { -webkit-transform: translate3d(100%,0,0); }
 }
 @-moz-keyframes slideouttoright {
     from { -moz-transform: translateX(0); }

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`/* keyframes for slidein from sides */`
`2`	`2`	`@-webkit-keyframes slideinfromright {`
`3`		`- from { -webkit-transform: translateX(100%); }`
`4`		`- to { -webkit-transform: translateX(0); }`
	`3`	`+ from { -webkit-transform: translate3d(100%,0,0); }`
	`4`	`+ to { -webkit-transform: translate3d(0,0,0); }`
`5`	`5`	`}`
`6`	`6`	`@-moz-keyframes slideinfromright {`
`7`	`7`	`from { -moz-transform: translateX(100%); }`
`@@ -13,8 +13,8 @@`
`13`	`13`	`}`
`14`	`14`
`15`	`15`	`@-webkit-keyframes slideinfromleft {`
`16`		`- from { -webkit-transform: translateX(-100%); }`
`17`		`- to { -webkit-transform: translateX(0); }`
	`16`	`+ from { -webkit-transform: translate3d(-100%,0,0); }`
	`17`	`+ to { -webkit-transform: translate3d(0,0,0); }`
`18`	`18`	`}`
`19`	`19`	`@-moz-keyframes slideinfromleft {`
`20`	`20`	`from { -moz-transform: translateX(-100%); }`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`/* keyframes for slideout to sides */`
`2`	`2`	`@-webkit-keyframes slideouttoleft {`
`3`		`- from { -webkit-transform: translateX(0); }`
`4`		`- to { -webkit-transform: translateX(-100%); }`
	`3`	`+ from { -webkit-transform: translate3d(0,0,0); }`
	`4`	`+ to { -webkit-transform: translate3d(-100%,0,0); }`
`5`	`5`	`}`
`6`	`6`	`@-moz-keyframes slideouttoleft {`
`7`	`7`	`from { -moz-transform: translateX(0); }`
`@@ -13,8 +13,8 @@`
`13`	`13`	`}`
`14`	`14`
`15`	`15`	`@-webkit-keyframes slideouttoright {`
`16`		`- from { -webkit-transform: translateX(0); }`
`17`		`- to { -webkit-transform: translateX(100%); }`
	`16`	`+ from { -webkit-transform: translate3d(0,0,0); }`
	`17`	`+ to { -webkit-transform: translate3d(100%,0,0); }`
`18`	`18`	`}`
`19`	`19`	`@-moz-keyframes slideouttoright {`
`20`	`20`	`from { -moz-transform: translateX(0); }`