Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Transitions: Use translate3D instead of translateX for slide transiti…

…on. Fix for iOS 6. Adresses #5764.
  • Loading branch information...
commit cf3a07a3d52731c1037e0874f3e3c77501255c9e 1 parent 68c8b33
@jaspermdegroot jaspermdegroot authored
View
8 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;
View
8 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%); }
View
8 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); }
Please sign in to comment.
Something went wrong with that request. Please try again.