JQuery Mobile transition stops working on long page -

i having issue page transitions no longer occuring when run bottom of long page.

here jsfiddle: http://jsfiddle.net/7wvha/7/

if open example , click on black navigation button transition runs expected. if return long page, scroll bottom , run again transition no longer occurs , second page appears straight away.

any 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> 

this default behavior of jquery mobile on long pages, transition animation disabled.

you can solve scrolling top of page on pagebeforechange.

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

$.mobile.defaulthomescroll 0 default, unless url bar hidden depending on device/platform.

demo