Skip to content
This repository
Browse code

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 f164821cd7fa64ea582728f524a927a621402507 1 parent 393f88c
authored April 21, 2012 uGoMobi committed June 21, 2012
3  css/structure/jquery.mobile.fixedToolbar.css
@@ -7,6 +7,9 @@
7 7
 	position: fixed;
8 8
 	z-index: 1000;
9 9
 }
  10
+.ui-page-pre-in {
  11
+	opacity: 0;
  12
+}
10 13
 .ui-header-fixed {
11 14
 	top: 0;
12 15
 }
7  js/jquery.mobile.transition.js
@@ -26,6 +26,7 @@ var createHandler = function( sequential ){
26 26
 			screenHeight = $.mobile.getScreenHeight(),
27 27
 			maxTransitionOverride = $.mobile.maxTransitionWidth !== false && $( window ).width() > $.mobile.maxTransitionWidth,
28 28
 			none = !$.support.cssTransitions || maxTransitionOverride || !name || name === "none",
  29
+			toPreClass = " ui-page-pre-in",
29 30
 			toggleViewportClass = function(){
30 31
 				$.mobile.pageContainer.toggleClass( "ui-mobile-viewport-transitioning viewport-" + name );
31 32
 			},
@@ -73,7 +74,7 @@ var createHandler = function( sequential ){
73 74
 			
74 75
 			startIn = function(){	
75 76
 			
76  
-				$to.addClass( $.mobile.activePageClass );				
  77
+				$to.addClass( $.mobile.activePageClass + toPreClass );				
77 78
 			
78 79
 				// Send focus to page as it is now display: block
79 80
 				$.mobile.focusPage( $to );
@@ -87,7 +88,9 @@ var createHandler = function( sequential ){
87 88
 					$to.animationComplete( doneIn );
88 89
 				}
89 90
 				
90  
-				$to.addClass( name + " in" + reverseClass );
  91
+				$to
  92
+					.removeClass( toPreClass )
  93
+					.addClass( name + " in" + reverseClass );
91 94
 				
92 95
 				if( none ){
93 96
 					doneIn();

1 note on commit f164821

Abdul Muis Al Amin

Hi Scottjehl,
I'm newbe in phonegap and jquery mobile. so can you give me detail instruction to use it ? ^_^

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