I'm going to just continue the discussion we were having on your blog here.
Basically, instead of modifying the jquerymobile.js, i'm using this (in addition to the additional css file explained in the blog post):
- $(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(pos,t){
- // 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, pos );
- if (t) {
- $from.css("top",-t);
- }
-
- // 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 ){
- scrollPage(0,$(window).scrollTop());
- 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.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(toScroll);
-
- if( !none ){
- $to.animationComplete( doneIn );
- }
-
- $to.addClass( name + " in" + reverseClass );
-
- if( none ){
- doneIn();
- }
-
- },
-
- doneIn = function() {
-
- if ( !sequential ) {
-
- if( $from ){
- cleanFrom();
- $from.css("top",0);
- }
- }
-
- $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(toScroll);
- //}
- deferred.resolve( name, reverse, $to, $from, true );
- };
- toggleViewportClass();
-
- if ( $from && !none ) {
- startOut();
- }
- else {
- doneOut();
- }
- return deferred.promise();
- };
- $.mobile.transitionHandlers = { "default" : $.mobile.defaultTransitionHandler };
- $.extend($.mobile, {
- defaultPageTransition: "slide"
- });
- });
The changes in green and red are the ones i'm making to attempt to get rid of the page jump on the from page and cause the to page to always come in scrolled to the top.
Currently, these two lines are causing a problem:
- window.scrollTo( 0, pos );
- if (t) {
- $from.css("top",-t);
- }
The scrollTo is rendered before the $from.css(...), causing a page jump. First, it scrolls to the top, then i offset the page so that it doesn't look like it is scrolled to top. I need both to happen at the same time with 1 render.
I have tried doing it the other way where instead of offsetting the from page, i offset the to page then correct the scroll on that page after the transition, however the same effect occurs.
-- Kevin