Facebook Twitter Gplus LinkedIn RSS
 
 
Home » Blog » Fixing the Transitions in jQuery Mobile 1.1.0

Fixing the Transitions in jQuery Mobile 1.1.0

Published on May 2nd, 2012

Well, reverting back to the jQuery Mobile 1.0.1 transitions isn’t really “fixing” things per say but…

A very hot topic in the community are the improved page transitions effects included in jQuery Mobile’s 1.1.0 release. In the previous major release 1.0.1, these page animations – slide, slideup, flip, pop – performed poorly on certain Android devices. To improve transition effects for devices overall, the developers moved to a two step process. All animations are now queued to first perform the pageOut sequence and then the pageIn sequence.

This effect creates a noticable break in the previously smoother animations, but the performance is greatly improved on smaller devices, so the tradeoff is considered good. To help mask a bit of this break, a fade effect was added, which unfortunately for some has created a noticeable flash effect.

Anyhow, that is all good, but for us that don’t care to support these slower devices, the older page transitions from jQuery Mobile 1.0.1 are much nicer to the eye. How do we revert things back without resorting to using the older version? It’s actually pretty simple once I started digging around.

First, we need to tell jQuery Mobile’s javascript function to run both the pageOut and pageIn functions at the same time. This is rather easy. Open jquery.mobile-1.1.0.js and scroll down to the createHandler function on line 2181 and add:. Copy and paste the following Javascript into a js file. I called mine utility.js.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
$(document).bind( "mobileinit", function(event) {
    $.mobile.transitionHandlers = { "default" : $.mobile.defaultTransitionHandler };
});
 
$(document).bind("mobileinit", function(){
    $.mobile.defaultTransitionHandler = function( name, reverse, $to, $from ) {
 
        var deferred = new $.Deferred(),
            sequential = false,
            reverseClass = reverse ? " reverse" : "",
            active  = $.mobile.urlHistory.getActive(),
            toScroll = active.lastScroll || $.mobile.defaultHomeScroll,
            screenHeight = $.mobile.getScreenHeight(),
            maxTransitionOverride = $.mobile.maxTransitionWidth !== false && $( window ).width() > $.mobile.maxTransitionWidth,
            none = !$.support.cssTransitions || maxTransitionOverride || !name || name === "none",
            toggleViewportClass = function(){
                $.mobile.pageContainer.toggleClass( "ui-mobile-viewport-transitioning viewport-" + name );
            },
            scrollPage = function(){
                // By using scrollTo instead of silentScroll, we can keep things better in order
                // Just to be precautios, disable scrollstart listening like silentScroll would
                $.event.special.scrollstart.enabled = false;
 
                window.scrollTo( 0, toScroll );
 
                // reenable scrollstart listening like silentScroll would
                setTimeout(function() {
                    $.event.special.scrollstart.enabled = true;
                }, 150 );
            },
            cleanFrom = function(){
                $from
                    .removeClass( $.mobile.activePageClass + " out in reverse " + name )
                    .height( "" );
            },
            startOut = function(){
                // if it's not sequential, call the doneOut transition to start the TO page animating in simultaneously
                if( !sequential ){
                    doneOut();
                }
                else {
                    $from.animationComplete( doneOut ); 
                }
 
                // Set the from page's height and start it transitioning out
                // Note: setting an explicit height helps eliminate tiling in the transitions
                $from
                    .height( screenHeight + $(window ).scrollTop() )
                    .addClass( name + " out" + reverseClass );
            },
 
            doneOut = function() {
 
                if ( $from && sequential ) {
                    cleanFrom();
                }
 
                startIn();
            },
 
            startIn = function(){   
                $to.css("z-index", -10);                                 
                $to.addClass( $.mobile.activePageClass );               
 
                // Send focus to page as it is now display: block
                $.mobile.focusPage( $to );
 
                // Set to page height
                $to.height( screenHeight + toScroll );
 
                scrollPage();
                $to.css("z-index", "");
                if( !none ){
                    $to.animationComplete( doneIn );
                }
 
                $to.addClass( name + " in" + reverseClass );
 
                if( none ){
                    doneIn();
                }
 
            },
 
            doneIn = function() {
 
                if ( !sequential ) {
 
                    if( $from ){
                        cleanFrom();
                    }
                }
 
                $to
                    .removeClass( "out in reverse " + name )
                    .height( "" );
 
                toggleViewportClass();
 
                // In some browsers (iOS5), 3D transitions block the ability to scroll to the desired location during transition
                // This ensures we jump to that spot after the fact, if we aren't there already.
                if( $( window ).scrollTop() !== toScroll ){
                    scrollPage();
                }
 
                deferred.resolve( name, reverse, $to, $from, true );
            };
 
        toggleViewportClass();
 
        if ( $from && !none ) {
            startOut();
        }
        else {
            doneOut();
        }
 
        return deferred.promise();
    };
    $.extend($.mobile, {
        defaultPageTransition: "slide",
        loadingMessage: "Loading, Please Wait..."
    });
});
$(document).bind( "mobileinit", function(event) {
	$.mobile.transitionHandlers = { "default" : $.mobile.defaultTransitionHandler };
});

$(document).bind("mobileinit", function(){
	$.mobile.defaultTransitionHandler = function( name, reverse, $to, $from ) {

		var deferred = new $.Deferred(),
			sequential = false,
			reverseClass = reverse ? " reverse" : "",
			active	= $.mobile.urlHistory.getActive(),
			toScroll = active.lastScroll || $.mobile.defaultHomeScroll,
			screenHeight = $.mobile.getScreenHeight(),
			maxTransitionOverride = $.mobile.maxTransitionWidth !== false && $( window ).width() > $.mobile.maxTransitionWidth,
			none = !$.support.cssTransitions || maxTransitionOverride || !name || name === "none",
			toggleViewportClass = function(){
				$.mobile.pageContainer.toggleClass( "ui-mobile-viewport-transitioning viewport-" + name );
			},
			scrollPage = function(){
				// By using scrollTo instead of silentScroll, we can keep things better in order
				// Just to be precautios, disable scrollstart listening like silentScroll would
				$.event.special.scrollstart.enabled = false;

				window.scrollTo( 0, toScroll );

				// reenable scrollstart listening like silentScroll would
				setTimeout(function() {
					$.event.special.scrollstart.enabled = true;
				}, 150 );
			},
			cleanFrom = function(){
				$from
					.removeClass( $.mobile.activePageClass + " out in reverse " + name )
					.height( "" );
			},
			startOut = function(){
				// if it's not sequential, call the doneOut transition to start the TO page animating in simultaneously
				if( !sequential ){
					doneOut();
				}
				else {
					$from.animationComplete( doneOut );	
				}

				// Set the from page's height and start it transitioning out
				// Note: setting an explicit height helps eliminate tiling in the transitions
				$from
					.height( screenHeight + $(window ).scrollTop() )
					.addClass( name + " out" + reverseClass );
			},

			doneOut = function() {

				if ( $from && sequential ) {
					cleanFrom();
				}

				startIn();
			},

			startIn = function(){	
				$to.css("z-index", -10);                                 
				$to.addClass( $.mobile.activePageClass );				

				// Send focus to page as it is now display: block
				$.mobile.focusPage( $to );

				// Set to page height
				$to.height( screenHeight + toScroll );

				scrollPage();
				$to.css("z-index", "");
				if( !none ){
					$to.animationComplete( doneIn );
				}

				$to.addClass( name + " in" + reverseClass );

				if( none ){
					doneIn();
				}

			},

			doneIn = function() {

				if ( !sequential ) {

					if( $from ){
						cleanFrom();
					}
				}

				$to
					.removeClass( "out in reverse " + name )
					.height( "" );

				toggleViewportClass();

				// In some browsers (iOS5), 3D transitions block the ability to scroll to the desired location during transition
				// This ensures we jump to that spot after the fact, if we aren't there already.
				if( $( window ).scrollTop() !== toScroll ){
					scrollPage();
				}

				deferred.resolve( name, reverse, $to, $from, true );
			};

		toggleViewportClass();

		if ( $from && !none ) {
			startOut();
		}
		else {
			doneOut();
		}

		return deferred.promise();
	};
	$.extend($.mobile, {
		defaultPageTransition: "slide",
		loadingMessage: "Loading, Please Wait..."
	});
});

Now all we need to do is override all the new CSS animations with the ones from the old 1.0.1 CSS file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
@charset "utf-8";
/* CSS Document */
/* Transitions from jQtouch (with small modifications): http://www.jqtouch.com/
Built by David Kaneda and maintained by Jonathan Stark.
Stripped out of jQuery Mobile 1.0.1 by Stephen "zSprawl" Russell.
*/
 
.in, .out {
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 350ms;
}
 
 
.slide.out {
    -webkit-transform: translateX(-100%);
    -webkit-animation-name: slideouttoleft;
}
 
.slide.in {
    -webkit-transform: translateX(0);
    -webkit-animation-name: slideinfromright;
}
 
.slide.out.reverse {
    -webkit-transform: translateX(100%);
    -webkit-animation-name: slideouttoright;
}
 
.slide.in.reverse {
    -webkit-transform: translateX(0);
    -webkit-animation-name: slideinfromleft;
}
 
.slideup.out {
    -webkit-animation-name: dontmove;
    z-index: 0;
}
 
.slideup.in {
    -webkit-transform: translateY(0);
    -webkit-animation-name: slideinfrombottom;
    z-index: 10;
}
 
.slideup.in.reverse {
    z-index: 0;
    -webkit-animation-name: dontmove;
}
 
.slideup.out.reverse {
    -webkit-transform: translateY(100%);
    z-index: 10;
    -webkit-animation-name: slideouttobottom;
}
 
.slidedown.out {
    -webkit-animation-name: dontmove;
    z-index: 0;
}
 
.slidedown.in {
    -webkit-transform: translateY(0);
    -webkit-animation-name: slideinfromtop;
    z-index: 10;
}
 
.slidedown.in.reverse {
    z-index: 0;
    -webkit-animation-name: dontmove;
}
 
.slidedown.out.reverse {
    -webkit-transform: translateY(-100%);
    z-index: 10;
    -webkit-animation-name: slideouttotop;
}
 
@-webkit-keyframes slideinfromright {
    from { -webkit-transform: translateX(100%); }
    to { -webkit-transform: translateX(0); }
}
 
@-webkit-keyframes slideinfromleft {
    from { -webkit-transform: translateX(-100%); }
    to { -webkit-transform: translateX(0); }
}
 
@-webkit-keyframes slideouttoleft {
    from { -webkit-transform: translateX(0); }
    to { -webkit-transform: translateX(-100%); }
}
 
@-webkit-keyframes slideouttoright {
    from { -webkit-transform: translateX(0); }
    to { -webkit-transform: translateX(100%); }
}
 
@-webkit-keyframes slideinfromtop {
    from { -webkit-transform: translateY(-100%); }
    to { -webkit-transform: translateY(0); }
}
 
@-webkit-keyframes slideinfrombottom {
    from { -webkit-transform: translateY(100%); }
    to { -webkit-transform: translateY(0); }
}
 
@-webkit-keyframes slideouttobottom {
    from { -webkit-transform: translateY(0); }
    to { -webkit-transform: translateY(100%); }
}
 
@-webkit-keyframes slideouttotop {
    from { -webkit-transform: translateY(0); }
    to { -webkit-transform: translateY(-100%); }
}
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}
 
@-webkit-keyframes fadeout {
    from { opacity: 1; }
    to { opacity: 0; }
}
 
.fade.out {
    z-index: 0;
    -webkit-animation-name: fadeout;
}
 
.fade.in {
    opacity: 1;
    z-index: 10;
    -webkit-animation-name: fadein;
}
 
/* The properties in this rule are only necessary for the 'flip' transition.
 * We need specify the perspective to create a projection matrix. This will add
 * some depth as the element flips. The depth number represents the distance of
 * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
 * value.
 */
.viewport-flip {
    -webkit-perspective: 1000;
    position: absolute;
}
 
.ui-mobile-viewport-transitioning,
.ui-mobile-viewport-transitioning .ui-page {
    width: 100%;
    height: 100%;
    overflow: visible;
}
 
.flip {
    -webkit-animation-duration: .65s;
    -webkit-backface-visibility:hidden;
    -webkit-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
}
 
.flip.out {
    -webkit-transform: rotateY(-180deg) scale(.8);
    -webkit-animation-name: flipouttoleft;
}
 
.flip.in {
    -webkit-transform: rotateY(0) scale(1);
    -webkit-animation-name: flipinfromleft;
}
 
/* Shake it all about */
 
.flip.out.reverse {
    -webkit-transform: rotateY(180deg) scale(.8);
    -webkit-animation-name: flipouttoright;
}
 
.flip.in.reverse {
    -webkit-transform: rotateY(0) scale(1);
    -webkit-animation-name: flipinfromright;
}
 
@-webkit-keyframes flipinfromright {
    from { -webkit-transform: rotateY(-180deg) scale(.8); }
    to { -webkit-transform: rotateY(0) scale(1); }
}
 
@-webkit-keyframes flipinfromleft {
    from { -webkit-transform: rotateY(180deg) scale(.8); }
    to { -webkit-transform: rotateY(0) scale(1); }
}
 
@-webkit-keyframes flipouttoleft {
    from { -webkit-transform: rotateY(0) scale(1); }
    to { -webkit-transform: rotateY(-180deg) scale(.8); }
}
 
@-webkit-keyframes flipouttoright {
    from { -webkit-transform: rotateY(0) scale(1); }
    to { -webkit-transform: rotateY(180deg) scale(.8); }
}
 
 
/* Hackish, but reliable. */
 
@-webkit-keyframes dontmove {
    from { opacity: 1; }
    to { opacity: 1; }
}
 
.pop {
    -webkit-transform-origin: 50% 50%;
}
 
.pop.in {
    -webkit-transform: scale(1);
    opacity: 1;
    -webkit-animation-name: popin;
    z-index: 10;
}
 
.pop.in.reverse {
    z-index: 0;
    -webkit-animation-name: dontmove;
}
 
.pop.out.reverse {
    -webkit-transform: scale(.2);
    opacity: 0;
    -webkit-animation-name: popout;
    z-index: 10;
}
 
@-webkit-keyframes popin {
    from {
        -webkit-transform: scale(.2);
        opacity: 0;
    }
    to {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}
 
@-webkit-keyframes popout {
    from {
        -webkit-transform: scale(1);
        opacity: 1;
    }
    to {
        -webkit-transform: scale(.2);
        opacity: 0;
    }
}
@charset "utf-8";
/* CSS Document */
/* Transitions from jQtouch (with small modifications): http://www.jqtouch.com/
Built by David Kaneda and maintained by Jonathan Stark.
Stripped out of jQuery Mobile 1.0.1 by Stephen "zSprawl" Russell.
*/

.in, .out {
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-duration: 350ms;
}


.slide.out {
	-webkit-transform: translateX(-100%);
	-webkit-animation-name: slideouttoleft;
}

.slide.in {
	-webkit-transform: translateX(0);
	-webkit-animation-name: slideinfromright;
}

.slide.out.reverse {
	-webkit-transform: translateX(100%);
	-webkit-animation-name: slideouttoright;
}

.slide.in.reverse {
	-webkit-transform: translateX(0);
	-webkit-animation-name: slideinfromleft;
}

.slideup.out {
	-webkit-animation-name: dontmove;
	z-index: 0;
}

.slideup.in {
	-webkit-transform: translateY(0);
	-webkit-animation-name: slideinfrombottom;
	z-index: 10;
}

.slideup.in.reverse {
	z-index: 0;
	-webkit-animation-name: dontmove;
}

.slideup.out.reverse {
	-webkit-transform: translateY(100%);
	z-index: 10;
	-webkit-animation-name: slideouttobottom;
}

.slidedown.out {
	-webkit-animation-name: dontmove;
	z-index: 0;
}

.slidedown.in {
	-webkit-transform: translateY(0);
	-webkit-animation-name: slideinfromtop;
	z-index: 10;
}

.slidedown.in.reverse {
	z-index: 0;
	-webkit-animation-name: dontmove;
}

.slidedown.out.reverse {
	-webkit-transform: translateY(-100%);
	z-index: 10;
	-webkit-animation-name: slideouttotop;
}

@-webkit-keyframes slideinfromright {
    from { -webkit-transform: translateX(100%); }
    to { -webkit-transform: translateX(0); }
}

@-webkit-keyframes slideinfromleft {
    from { -webkit-transform: translateX(-100%); }
    to { -webkit-transform: translateX(0); }
}

@-webkit-keyframes slideouttoleft {
    from { -webkit-transform: translateX(0); }
    to { -webkit-transform: translateX(-100%); }
}

@-webkit-keyframes slideouttoright {
    from { -webkit-transform: translateX(0); }
    to { -webkit-transform: translateX(100%); }
}

@-webkit-keyframes slideinfromtop {
    from { -webkit-transform: translateY(-100%); }
    to { -webkit-transform: translateY(0); }
}

@-webkit-keyframes slideinfrombottom {
    from { -webkit-transform: translateY(100%); }
    to { -webkit-transform: translateY(0); }
}

@-webkit-keyframes slideouttobottom {
    from { -webkit-transform: translateY(0); }
    to { -webkit-transform: translateY(100%); }
}

@-webkit-keyframes slideouttotop {
    from { -webkit-transform: translateY(0); }
    to { -webkit-transform: translateY(-100%); }
}
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

@-webkit-keyframes fadeout {
    from { opacity: 1; }
    to { opacity: 0; }
}

.fade.out {
	z-index: 0;
	-webkit-animation-name: fadeout;
}

.fade.in {
	opacity: 1;
	z-index: 10;
	-webkit-animation-name: fadein;
}

/* The properties in this rule are only necessary for the 'flip' transition.
 * We need specify the perspective to create a projection matrix. This will add
 * some depth as the element flips. The depth number represents the distance of
 * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
 * value.
 */
.viewport-flip {
	-webkit-perspective: 1000;
	position: absolute;
}

.ui-mobile-viewport-transitioning,
.ui-mobile-viewport-transitioning .ui-page {
	width: 100%;
	height: 100%;
	overflow: visible;
}

.flip {
	-webkit-animation-duration: .65s;
	-webkit-backface-visibility:hidden;
	-webkit-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
}

.flip.out {
	-webkit-transform: rotateY(-180deg) scale(.8);
	-webkit-animation-name: flipouttoleft;
}

.flip.in {
	-webkit-transform: rotateY(0) scale(1);
	-webkit-animation-name: flipinfromleft;
}

/* Shake it all about */

.flip.out.reverse {
	-webkit-transform: rotateY(180deg) scale(.8);
	-webkit-animation-name: flipouttoright;
}

.flip.in.reverse {
	-webkit-transform: rotateY(0) scale(1);
	-webkit-animation-name: flipinfromright;
}

@-webkit-keyframes flipinfromright {
    from { -webkit-transform: rotateY(-180deg) scale(.8); }
    to { -webkit-transform: rotateY(0) scale(1); }
}

@-webkit-keyframes flipinfromleft {
    from { -webkit-transform: rotateY(180deg) scale(.8); }
    to { -webkit-transform: rotateY(0) scale(1); }
}

@-webkit-keyframes flipouttoleft {
    from { -webkit-transform: rotateY(0) scale(1); }
    to { -webkit-transform: rotateY(-180deg) scale(.8); }
}

@-webkit-keyframes flipouttoright {
    from { -webkit-transform: rotateY(0) scale(1); }
    to { -webkit-transform: rotateY(180deg) scale(.8); }
}


/* Hackish, but reliable. */

@-webkit-keyframes dontmove {
    from { opacity: 1; }
    to { opacity: 1; }
}

.pop {
	-webkit-transform-origin: 50% 50%;
}

.pop.in {
	-webkit-transform: scale(1);
    opacity: 1;
	-webkit-animation-name: popin;
	z-index: 10;
}

.pop.in.reverse {
	z-index: 0;
	-webkit-animation-name: dontmove;
}

.pop.out.reverse {
	-webkit-transform: scale(.2);
	opacity: 0;
	-webkit-animation-name: popout;
	z-index: 10;
}

@-webkit-keyframes popin {
    from {
        -webkit-transform: scale(.2);
        opacity: 0;
    }
    to {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes popout {
    from {
        -webkit-transform: scale(1);
        opacity: 1;
    }
    to {
        -webkit-transform: scale(.2);
        opacity: 0;
    }
}

I dropped them in a file called jquery.mobile-1.0.1.transitions.css. Now include everything in the HTML header. Order matters!

1
2
3
4
5
<link rel="stylesheet" href="css/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="css/jquery.mobile.1.0.1.transitions.css" />
<script type="text/javascript" charset="utf-8" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/utility.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.1.0.js"></script>
<link rel="stylesheet" href="css/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="css/jquery.mobile.1.0.1.transitions.css" />
<script type="text/javascript" charset="utf-8" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/utility.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.1.0.js"></script>

So far I’ve tested the basic transitions. No promises that the new ones (flow/turn) aren’t completely messed up now. YMMV.

About the Author: Sprawl

Stephen Russell is a Mobile App developer and all around IT geek that spends his days running data centers and his nights coding. This site is the go to place for all of zSprawl's work and the infamous development blog. In his free time, he enjoys tinkering with web code, playing video games, and otherwise plotting to take over the Internets.

 

27 Responses to “Fixing the Transitions in jQuery Mobile 1.1.0”

  1. Thanks for the article!

    I really hate that there is no way to override the default sequential value without modifying the source directly. I’m going to take this and see if I can also remove the page jump similar to how jqtouch does it.

    • Yeah I feel the same way about the sequential value, but at least it is an easy toggle.

      Let me know if you have any success with the jump. I hear that is a much harder beast to defeat, which is part of the reason why jQM has chosen to go to a pageIn/pageOut method.

  2. I was able to get it to work without having to modify the js file by re-defining the default transition handler. I’ll re-implement the code I had that prevented the page jump to see how well it works with these transitions tomorrow.

  3. Hi, i’m following you, i not using jqm 1.1.0 for the bad tansition on iOS… so if you goal to port the 1.0.1 tansition i’ll use your code.

    Bye

    • That’s exactly it. I don’t like the new transistions, but I love the performance the new library gives. For example, you shouldn’t use on() with 1.0.1 (due to the older jquery library required).

  4. thanks a lot!!!,,, i thought it was only me that hated the new trnsitions, my problem was on the fad out/ fade in transitions… in jqm101 they where so smooth that you could easily fake small animations, just by changing pages…. but now with the new jqm 110, fade transitions where horrible…. thanks to your fix i can sleep again…!

    • I admit, I did a round of looking at other libraries, then decided jQM was still the best. Thus I embarked on this route.

    • Hello again, just update with the new fix (utility.js file) and yes it is much better…. Im writting a phonegap/jqm app, and im not sure if after upgrading to cordova 1.7.0, or to jqm 1.1.0, really started to have small transitions problems…. small ones, but for an iOS app a fraction of second in delay can be too much…. lets see how this goes on,, but thanks again your fix is the best i could found so far….

  5. Thank you so much for posting this! I just upgraded and was close to jumping out the window when I saw the transitions. This works perfectly.

  6. Thanks Stephen! I dropped this css in and it’s fixed a lot of bugs on my mobile site. Keep up the good work!

  7. Note that overflow:visible is in the default CSS for JQM 1.1.1, so with the patch, should be no reason to include that CSS at all.

  8. To clarify, I was referring to jstafford’s patch so that the overflow:hidden isn’t needed.

  9. Whoops, sorry! I was wrong. The standard CSS for JQM 1.1.1 has overflow:hidden.

    So jstafford is using a belt and suspenders.

    I’m still experimenting. Adding the CSS cleaned-up 1.1.1 transitions a lot. Unfortunately, patching-in the 1.0.1 transitions gives me some really ugly stuff. I might just be OK with the 1.1.1 transitions with the CSS change, and possibly jstafford’s patch.

  10. This…made….my….day!
    Even though the flicker is worse on Android, my iOS app also suffered bigtime but now runs lovely!
    Thanks for the workaround!

  11. Hey there,

    i’m using JQuery 2.0.0, JQM 1.3.1 and PhoneGap 2.6.

    I still have problems with flickering and white flashes. I’ve tried your fix but it doesn’t seem to work anymore.

    Any idea on how to fix it with the latest JQM release ?

    Thank you.

    • Have you figured this out? I am having the same problem. The fix doesn’t seem to work with JQM 1.3. If I revert back to JQM 1.0 transitions are flawless, but it creates other problems. Any help is appreciated.

      Thank you.

Leave a Reply

© 2012 zSprawl's zApps