JQuery Mobile Affichage vide

Question

Je construis une application web JQuery Mobile, et je suis confronté à un problème intéressant. J'ai un listview, et quand je clique sur une des lignes du menu, la page 2 se charge comme prévu. Cependant, quand je clique sur le bouton de retour, la page page 1 se charge pendant une demi-seconde, puis la page 2 revient (sans transition).

Voici le code pour les 2 pages:

<section id="more" data-role="page"> 
    <header data-role="header" data-position="fixed" class="AppHeader"> 
     <h1>More</h1> 
    </header> 

    <div data-role="content"> 
     <ul data-role="listview" data-filter="false" id="moreList"> 
      <li><a href="#historyOfLandmarks" data-transition="slide"><h1>History of Boston Landmarks</h1></a></li> 
     </ul> 
    </div> 
</section> 

<section id="historyOfLandmarks" data-role="page"> 
    <header data-role="header" data-position="fixed" class="AppHeader"> 
     <a href="#more" data-transition="slide" data-direction="reverse" data-icon="arrow-l" data-rel="back">Back</a> 
     <h1>History of Boston Landmarks</h1> 
    </header> 

    <div data-role="content"> 
     <p>This is a list of National Historic Landmarks in Boston, Massachusetts.</p> 
    </div> 
</section> 

JS Fiddle n'illustre pas le problème: http://jsfiddle.net/jakechasan/66vbS/

Partout ailleurs, le problème apparaît: http://jakeserver.com/Apps/BostonLandmarks/B5/landmarks.html

Je ne comprends pas pourquoi JSFiddle n'illustre pas le problème, cependant, le même fichier sur mon ordinateur/serveur a ce problème?

Des idées?

Merci.

Answer 1

Votre propre CSS est responsable de ce problème.

Modifier ce fichier: http://jakeserver.com/Apps/BostonLandmarks/B5/css/styles.css

et retirer du fond:

.ui-page{ 
    display: block !important; 
} 

Je l'ai testé avec succès.