Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Some CSS tweaks to make slideup/slidedown/pop/fade transitions run sm…

…oother on the Motorola Xoom (Android 3.1). Basically, we needed to specify translate3d() on the page that does *NOT* animate to avoid flashing. This basically pushes the non-animating page into the same rendering pipeline as the one being animated and avoids a pre-flash.

Note that things *STILL* blink badly on the Xoom after the transition completes. This is due to the removal of the ui-page-active class on the "from" page which toggles its display to display:none. Apparently the Xoom redraws all positioned elements when the display of one of them is turned off. Still exploring ways around this including off-screen placement which seems to be effective, but may have accessibility impact.
  • Loading branch information...
commit 6043388fa2217247e3990b5c710eb09f7f0a8f10 1 parent c7a3775
@jblas jblas authored
Showing with 82 additions and 42 deletions.
  1. +82 −42 themes/default/jquery.mobile.transitions.css
View
124 themes/default/jquery.mobile.transitions.css
@@ -76,26 +76,36 @@
transform: translateX(-100%);
}
-.slidedown.in,
-.slidedown.out.reverse,
.slideup.in,
-.slideup.out.reverse {
+.slideup.out.reverse,
+.slidedown.in,
+.slidedown.out.reverse {
z-index: 10;
}
-.slidedown.in.reverse,
-.slidedown.out,
+.slideup.out,
.slideup.in.reverse,
-.slideup.out {
+.slidedown.out,
+.slidedown.in.reverse {
z-index: 0;
}
-.slidedown.in,
-.slidedown.out.reverse.animate {
- -webkit-transform: translateY(-100%);
- -moz-transform: translateY(-100%);
- -o-transform: translateY(-100%);
- transform: translateY(-100%);
+.slideup.in.reverse,
+.slideup.in.reverse.animate,
+.slideup.out,
+.slideup.out.animate,
+.slidedown.in.reverse,
+.slidedown.in.reverse.animate,
+.slidedown.out,
+.slidedown.out.animate {
+ /* For the page that doesn't animate, translate3d needs to
+ * be set on it to prevent flashing and produce a smoother
+ * animation on the Motorola Xoom (Android 3.1).
+ */
+ -webkit-transform: translate3d(0,0,0);
+ -moz-transform: translate3d(0,0,0);
+ -o-transform: translate3d(0,0,0);
+ transform: translate3d(0,0,0);
}
.slideup.in,
@@ -103,21 +113,25 @@
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-o-transform: translateY(100%);
- transform: translateY(100%);
+ transform: translateY(100%);
}
-.slidedown.in.animate,
-.slidedown.in.reverse,
-.slidedown.out,
-.slidedown.out.reverse,
-.slideup.in.animate,
-.slideup.in.reverse,
-.slideup.out,
-.slideup.out.reverse {
+.slidedown.in,
+.slidedown.out.reverse.animate {
+ -webkit-transform: translateY(-100%);
+ -moz-transform: translateY(-100%);
+ -o-transform: translateY(-100%);
+ transform: translateY(-100%);
+}
+
+.slideup.in.animate,
+.slideup.out.reverse,
+.slidedown.in.animate,
+.slidedown.out.reverse {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
- transform: translateY(0);
+ transform: translateY(0);
}
.fade.animate {
@@ -128,18 +142,34 @@
}
.fade.in,
-.fade.out.animate {
- opacity: 0;
+.fade.out {
+ /* translate3d() needs to be set on both pages for a smoother
+ * animation on the Motorola Xoom (Android 3.1).
+ */
+ -webkit-transform: translate3d(0,0,0);
+ -moz-transform: translate3d(0,0,0);
+ -o-transform: translate3d(0,0,0);
+ transform: translate3d(0,0,0);
+}
+
+.fade.in,
+.fade.out.reverse {
z-index: 10;
}
-.fade.in.animate,
-.fade.out {
- opacity: 1;
+.fade.out,
+.fade.in.reverse {
+ z-index: 0;
}
+.fade.in,
+.fade.out.animate {
+ opacity: 0;
+}
+
+.fade.in.animate,
.fade.out {
- z-index: 0;
+ opacity: 1;
}
/* The properties in this rule are only necessary for the 'flip' transition.
@@ -182,22 +212,11 @@
-webkit-transform: rotateY(0deg) scale(1.0);
}
-
.flip.out.animate,
.flip.in.reverse {
-webkit-transform: rotateY(-180deg) scale(.8);
}
-.pop.in,
-.pop.out.reverse {
- z-index: 10;
-}
-
-.pop.in.reverse,
-.pop.out {
- z-index: 0;
-}
-
.pop.animate {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
@@ -213,6 +232,27 @@
}
.pop.in,
+.pop.out.reverse {
+ z-index: 10;
+}
+
+.pop.out,
+.pop.in.reverse {
+ z-index: 0;
+}
+
+.pop.in.reverse,
+.pop.in.reverse.animate,
+.pop.out,
+.pop.out.animate {
+ -webkit-transform: translate3d(0,0,0);
+ -moz-transform: translate3d(0,0,0);
+ -o-transform: translate3d(0,0,0);
+ transform: translate3d(0,0,0);
+ opacity: 1;
+}
+
+.pop.in,
.pop.out.reverse.animate {
-webkit-transform: scale(.2);
-moz-transform: scale(.2);
@@ -221,9 +261,8 @@
opacity: 0;
}
-.pop.in.reverse,
-.pop.in.animate,
-.pop.out.reverse{
+.pop.in.animate,
+.pop.out.reverse {
-webkit-transform: scale(1.0);
-moz-transform: scale(1.0);
-o-transform: scale(1.0);
@@ -231,6 +270,7 @@
opacity: 1;
}
+
@-o-viewport {
min-zoom: 1;
}
Please sign in to comment.
Something went wrong with that request. Please try again.