JQuery Mobile transition stops working on long page

Question

I am having an issue with page transitions no longer occuring when run from the bottom of a long page.

Here is a jsfiddle: http://jsfiddle.net/7WVHA/7/

If you open up the example and click on the black navigation button the transition runs as expected. However if you return to the long page, scroll to the bottom and run it again the transition no longer occurs and the second page just appears straight away.

Any help would be greatly appreciated.

<div data-role="page" id="long">
    <div data-role="header" data-position="fixed" data-theme="a">
        <h1>Long Page</h1>
        <a href="#short" data-transition="flip" data-role="button" data-theme="b">DO TRANSITION</a>

    </div>
    <div data-role="content" data-theme="a">
        <div class="box">TEST BOX 1</div>
        <div class="box">TEST BOX 2</div>
        <div class="box">TEST BOX 3</div>
        <div class="box">TEST BOX 4</div>
        <div class="box">TEST BOX 5</div>
        <div class="box">TEST BOX 6</div>
        <div class="box">TEST BOX 7</div>        
    </div>
</div>
<div data-role="page" id="short">
    <div id="gridheader" class="header" data-role="header" data-position="fixed" data-theme="a">
        <h1>Short Page</h1>
        <a href="#long" data-transition="flip" data-role="button" data-theme="b"> Back</a>

    </div>
    <div data-role="content" data-theme="a">
        Short page
    </div>
</div>

Answer 1

This is the default behavior of jQuery Mobile on long pages, transition animation is disabled.

You can solve this by scrolling to top of page on pagebeforechange.

$(document).on("pagebeforechange", function () {
    window.scrollTo(0, $.mobile.defaultHomeScroll);
});

$.mobile.defaultHomeScroll is 0 by default, unless url bar is hidden depending on device/platform.

Demo