Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Browse files

Add a class while the TO page is being set up for show (block display…

…, focus, scrolling, setting height) called ui-page-pre-in. This class sets the opacity of the TO page to 0 during this momentary process, which at least in my testing, prevents fixed toolbars and pages from flickering during transitions when fixed toolbars are used in a web app mode in iOS (not Safari, but native webview). Fade transition is particularly improved. Addresses, but perhaps doesn't completely fix Issue #4024
  • Loading branch information...
1 parent c7b8e25 commit ff1a7e019f45ad00fc9aa3e0fcb08df5acc54a66 scottjehl committed
3  css/structure/
@@ -7,6 +7,9 @@
position: fixed;
z-index: 1000;
+.ui-page-pre-in {
+ opacity: 0;
.ui-header-fixed {
top: 0;
7 js/
@@ -25,6 +25,7 @@ var createHandler = function( sequential ){
screenHeight = $.mobile.getScreenHeight(),
maxTransitionOverride = $.mobile.maxTransitionWidth !== false && $( window ).width() > $.mobile.maxTransitionWidth,
none = !$.support.cssTransitions || maxTransitionOverride || !name || name === "none",
+ toPreClass = " ui-page-pre-in",
toggleViewportClass = function(){
$.mobile.pageContainer.toggleClass( "ui-mobile-viewport-transitioning viewport-" + name );
@@ -72,7 +73,7 @@ var createHandler = function( sequential ){
startIn = function(){
- $to.addClass( $.mobile.activePageClass );
+ $to.addClass( $.mobile.activePageClass + toPreClass );
// Send focus to page as it is now display: block
$.mobile.focusPage( $to );
@@ -86,7 +87,9 @@ var createHandler = function( sequential ){
$to.animationComplete( doneIn );
- $to.addClass( name + " in" + reverseClass );
+ $to
+ .removeClass( toPreClass )
+ .addClass( name + " in" + reverseClass );
if( none ){

5 comments on commit ff1a7e0


Holy brilliant! This worked incredibly well for me, thank you!


On further inspection it appears that is throwing an error: ReferenceError: Can't find variable: define. Any thoughts on why that may be happening?


define is the AMD define function. We use AMD internally to handle dependencies between the modules and to build the jQuery Mobile package.

Note that these AMD modules are not exposed in the module.



Does anybody know if this change made it into the standard jqm 1.2.0 js and css files? I can see something similar to the above in the 1.2.0.js but not the 1.2.0.min.js - should we be using the non minified version to pick this change up?



thanks, it is working for me, but I have still have a problem, when page load, it little bit jerk down side

Please sign in to comment.
Something went wrong with that request. Please try again.