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.
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.
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.
What line did ya use? Does it only apply to the default transition?
I used this: https://gist.github.com/2595149
Basically just copied the inner of that function and added sequential = false to it.
By creating a copy in that way, I can now modify it to add the code that prevents the page jump.
That code doesn’t actually do anything without the addition of this line: $.mobile.transitionHandlers = { “default” : $.mobile.defaultTransitionHandler };
Ahhh I get you. Thanks man, I’ll check it out!!
Updated the blog post to include this information. It’s best practice not to edit that jquery.mobile.js file if we can help it.
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).
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….
Right on. Good luck! Make sure you “clean” your project too. I had some old transitions firing off even after the update.
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.
Uh oh, looks like I may have spoken too soon. This definitely removes the flashes and works perfectly in Safari, but on iOS the new page fully appears as soon as a link is clicked, then the transition happens, so you see the original page again, then the transition, then the new page. Very disturbing 🙁
Yeah, a different bug. Check this article.
http://zsprawl.com/iOS/2012/05/fixing-the-page-flicker-during-css-slide/
Just posted this on your other article too, but I think it may help some people so I’ll add here as well.
I think the issue IS actually related, as it can be addressed directly in your code above. If you add the two lines from the following fix to your javascript above (both in the “startIn” function), the flicker issue in Phonegap will be fixed.
https://github.com/Diveboard/jquery-mobile/commit/ff125b65e682ecd33888a6db1221ac441d258994
I should point out I’m also changing your CSS above in accordance with your other post (http://zsprawl.com/iOS/2012/05/fixing-the-page-flicker-during-css-slide/) so that:
.ui-mobile-viewport-transitioning,
.ui-mobile-viewport-transitioning .ui-page {
overflow: visible;
}
instead of overflow: hidden, as is written above.
My environment is JQM 1.1.0, JQuery 1.7.1, Phonegap 1.7.0
Thanks again!
Thanks Stephen! I dropped this css in and it’s fixed a lot of bugs on my mobile site. Keep up the good work!
Awesome!!
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.
To clarify, I was referring to jstafford’s patch so that the overflow:hidden isn’t needed.
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.
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!
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.