jquery mobile применяет ненужную дополнительную высоту при первом посещении страниц

Question

Я искал, но не нашел ничего полезного (может быть, я не знаю, что искать?).
в многостраничном index.html, если у меня есть data-transition='none', целевая страница будет иметь некоторую дополнительную высоту, которая заставит вертикальную полосу прокрутки (и, конечно, прокручивается страница), в то время как высота содержимого страницы не будет превышать высоту окна просмотра.
Следует отметить, что это происходит только на страницах с атрибутом data-transition, установленным в none. измените его на слайд или что-то еще, и проблема с высотой исчезла. также это происходит только при первом посещении. перейдите на страницу, перейдите на другую страницу, верните голову и высоту страницы.
это выглядит как проблема расчета высоты jQuery. или, по крайней мере, я делаю, чтобы jquery вычислял высоту неправильно.
проблема существует в FF и хром, но не IE 9.

HTML:

<div id="header" data-role="header" data-theme="a" data-position="fixed" data-tap-toggle="false"> 
    <h1>I'm Fixed</h1> 
</div><!-- header --> 

<div data-role="page" id="p1"> 
    <div role="main" class="ui-content"> 
     <h1>HOME</h1> 
    </div> 
</div><!--p1--> 

<div data-role="page" id="p2"> 
    <div role="main" class="ui-content"> 
     <h1>OTHER PAGE</h1> 
    </div> 
</div><!--p2--> 

<div data-role="page" id="p3"> 
    <div role="main" class="ui-content"> 
    <h1>THE END</h1> 
    </div> 
</div><!--p3--> 

<div id="footer" data-role="footer" data-theme="a" data-position="fixed" data-tap-toggle="false"> 
    <a href="#p1" class="ui-btn" data-transition="none">HOME</a> 
    <a href="#p2" class="ui-btn" data-transition="none">OTHER PAGE</a> 
    <a href="#p3" class="ui-btn" data-transition="none">THE END</a> 
</div><!-- footer --> 

Jquery:

$(document).on("pageinit", function(ev, ui){ 
    $("#header").toolbar({theme:"a", position:"fixed"}); 
    $("#footer").toolbar({theme:"a", position:"fixed"}); 
}); 

вот jsbin: http://jsbin.com/jikacu/3/edit?html,js,output

1. нажмите «ДРУГИЕ СТРАНИЦЫ», страница загрузится и будет иметь дополнительную высоту.
2. нажмите «HOME».
3. нажмите «OTHER PAGE», и вы увидите, что высота страницы фиксирована.

Jquery 2.1.1 - 1.4.5 JQM - многостраничный HTML с внешними стойкими панелей инструментов.

Почему это происходит?

Answer 1

Попробуйте это исправить:

Снимите:

$(document).on("pageinit", function(ev, ui){ 
    $("#header").toolbar({theme:"a", position:"fixed"}); 
    $("#footer").toolbar({theme:"a", position:"fixed"}); 
}); 

... и добавить:

$("[data-role='header'], [data-role='footer']").toolbar();