Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

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...
commit ff1a7e019f45ad00fc9aa3e0fcb08df5acc54a66 1 parent c7b8e25
scottjehl authored
View
3  css/structure/jquery.mobile.fixedToolbar.css
@@ -7,6 +7,9 @@
position: fixed;
z-index: 1000;
}
+.ui-page-pre-in {
+ opacity: 0;
+}
.ui-header-fixed {
top: 0;
}
View
7 js/jquery.mobile.transition.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 ){
doneIn();

4 comments on commit ff1a7e0

@nate8684

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

@nate8684

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

@gseguin
Collaborator

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 jquery.mobile module.

@devc33

Hi,

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?

Regards,

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