Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

Commit

Permalink
Browse files Browse the repository at this point in the history
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 6997848
Show file tree
Hide file tree
Showing 3 changed files with 12 additions and 12 deletions.
8 changes: 4 additions & 4 deletions css/structure/jquery.mobile.transition.slide.css
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand Down
8 changes: 4 additions & 4 deletions 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%); }
Expand All @@ -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%); }
Expand Down
8 changes: 4 additions & 4 deletions 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); }
Expand All @@ -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); }
Expand Down

0 comments on commit 6997848

Please sign in to comment.