Permalink
Browse files

Transitions: Use translate3D instead of translateX for slide transiti…

…on. Fix for iOS 6. Adresses #5764.
  • Loading branch information...
jaspermdegroot committed Mar 31, 2013
1 parent de18420 commit 6997848d528ccb925a74e4e32ba2be246d6b419f
@@ -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;
@@ -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%); }
@@ -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); }

0 comments on commit 6997848

Please sign in to comment.