Skip to content
This repository
Browse code

Merge pull request #4462 from Diveboard/master

slide flickering within a ios app webview (i.e. phonegap container)
  • Loading branch information...
commit d89a919fb0f5e902934d0179b73baacb0cc4fc2f 1 parent 88cab0a
Jasper de Groot authored June 16, 2012

Showing 1 changed file with 13 additions and 7 deletions. Show diff stats Hide diff stats

  1. 20  js/jquery.mobile.transition.js
20  js/jquery.mobile.transition.js
@@ -70,11 +70,14 @@ var createHandler = function( sequential ){
70 70
 				
71 71
 				startIn();
72 72
 			},
73  
-			
74  
-			startIn = function(){	
75  
-			
76  
-				$to.addClass( $.mobile.activePageClass );				
77  
-			
  73
+
  74
+			startIn = function(){
  75
+
  76
+				//prevent flickering in phonegap container
  77
+				$to.css("z-index", -10);
  78
+
  79
+				$to.addClass( $.mobile.activePageClass + toPreClass );
  80
+
78 81
 				// Send focus to page as it is now display: block
79 82
 				$.mobile.focusPage( $to );
80 83
 
@@ -82,7 +85,10 @@ var createHandler = function( sequential ){
82 85
 				$to.height( screenHeight + toScroll );
83 86
 				
84 87
 				scrollPage();
85  
-				
  88
+
  89
+				//restores visibility of the new page
  90
+				$to.css("z-index", "");
  91
+
86 92
 				if( !none ){
87 93
 					$to.animationComplete( doneIn );
88 94
 				}
@@ -151,4 +157,4 @@ $.mobile.transitionFallbacks = {};
151 157
 })( jQuery, this );
152 158
 //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
153 159
 });
154  
-//>>excludeEnd("jqmBuildExclude");
  160
+//>>excludeEnd("jqmBuildExclude");

5 notes on commit d89a919

berrigan

Is this supposed to be in 1.1.1, because I've searched 1.1.1.js, and can't find this anywhere.

Anyway, I think you missed a line just after $to.css(....);
I was getting nothing showing up, but removing the pre-class fixed it.

So, on line 91 add :: $to.removeClass(toPreClass);

Jasper de Groot
Owner

@berrigan

Here you can see the history https://github.com/jquery/jquery-mobile/commits/1.1-stable/js/jquery.mobile.transition.js

I noticed that a part of the code was missing after this commit, so I reverted this one and committed the changes again after pulling in another commit first. By then everything was in, including $to.removeClass( toPreClass ).

Anyway, these changes have been removed by commit 8e570e3. So the answer is no, this is not in 1.1.1.. This means no toPreClass is being added and shouldn't have to be removed.

When you say "I was getting nothing showing up, but removing the pre-class fixed it.", are you talking about 1.1.1. final?

berrigan

Sorry for the confusion, the nothing showing up part was after putting the change back into 1.1.1.

Seems odd that this isn't in 1.1.1, considering that it's listed in the Key Changes section of the blog announcement, with a link here.

In any case, it was rather effective for me, so I'll be leaving it in my customised version for a moment.

Jasper de Groot
Owner

@berrigan

We looked into what happened and we can only conclude that something went wrong when that other fix was added (8e570e3).
So it should have been in the code, but unfortunately it isn't :(

Jasper de Groot
Owner

People that want to use the fix that was accidently removed can replace the startIn function in 1.1.1. final by the code shown below.
The declaration of the variable toPreClass was still in the 1.1.1. final code as well as the CSS for class ui-page-pre-in.

I put it back with commit 0ed5aeb so it will be part of 1.1.2.

            startIn = function(){

                //prevent flickering in phonegap container
                $to.css("z-index", -10);

                $to.addClass( $.mobile.activePageClass + toPreClass );

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

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

                scrollPage();

                //restores visibility of the new page
                $to.css("z-index", "");

                if( !none ){
                    $to.animationComplete( doneIn );
                }

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

                if( none ){
                    doneIn();
                }

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