By horizontal i mean kind of like tabbing between pages within same record, and vertical is like moving to a next record.

For "horizontal", I am using one type of transition and no history management,

"vertical" requires different transition and support for back button.

I.e. when users enter record A, navigate two pages "sideways", then enter child record B, move two pages sideways, then press the back button, I want them to return to the record A page 3 (where they came from) with a flow transition.

Currently I implemented it this way for horizontal:

$.mobile.changePage('#pageID', { transition: "slide", changeHash: false })

window.history.replaceState( {} , '', '#pageID' );

and this way for vertical:

$.mobile.changePage('#pageID', { transition: "flow", changeHash: true });

This mostly works, except I loose the "flow" transition when back button is pressed.

I also tried a different approach, with changeHash: true for all page changes and a counter incremented each time page is change horizontally:

document.addEventListener("backbutton", onBackKeyDown, false);

function onBackKeyDown(){

      window.history.go(-counter);

}

This has the same effect: navigation works as expected, but transition is lost if more than 1 history step is involved.

Any suggestions on how to make the page transition work would be appreciated. Thanks!