J'ai un modèle multi pages développé dans jquery mobile. Le problème auquel je suis confronté est chaque fois que je navigue d'une page à l'autre dans Firefox (desktop.Version 12) , les arrière-plans des boutons, listview etc disparaissent au début, mais leurs étiquettes restent pendant un certain temps. Au moment où le contenu de la deuxième page apparaît. Pour une fraction de seconde, les étiquettes de la page précédente sont superposées sur la nouvelle page. il ne reste que pendant une fraction de seconde, il semble étrange car il y a un certain nombre de composants dans la page. Je sais que les transitions de pages ne fonctionneront pas avec Firefox et je suis d'accord avec ça. Mais ce problème de rendu ne devrait pas arriver.Afficher les problèmes lorsque nous passons d'une page mobile jquery à une autre dans firefox
code J'utilise:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page1</h1>
</div>
<button>button</button>
<button>button</button>
<button>button</button>
<button>button</button>
<button>button</button>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li>
<a href="#page2">aaa</a>
</li>
<li>
<a href="#page2">aaaaa</a>
</li>
<li>
<a href="#page2">bbbbbbbb</a>
</li>
</ul>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header" >
<h1>Page 2</h1>
<a href="#page1" data-back-btn="true" data-icon="back" class="ui-btn-left">Back</a>
</div>
<div data-role="content">
This content is for page 2..
<ul data-role="listview" data-inset="true">
<li>
<a href="#page1">BBBBBBBB</a>
</li>
<li>
<a href="#page1">WWWWWWWWWW</a>
</li>
<li>
<a href="#page1">FFFFFFFFFFFFFFFFFF</a>
</li>
</ul>
</div>
</div>
</body>
</html>
Une démo ici - http://jsfiddle.net/5FZb7/
Remarque:
Si j'utilise la version 1.1 mobile jquery, cette question ne happening.But dans mon projet Je dois utiliser l'ancienne version 1.0.1 puisque nous l'avons déjà utilisée pour la plupart du projet et que nous ne voulons pas passer à la version 1.1 pour le moment.
Merci d'avance.