I have a multi-page template developed in jquery mobile. The problem I am facing is when I navigate from one page to another in Firefox (desktop.Version 12), button backgrounds, listview, etc. disappear at first, but their labels remain for a while. At this time, the contents of the second page appear. Within seconds, the marks of the previous page are superimposed on the new page. Although it only remains for a split second, it looks weird because there are a number of components on the page. I know that page transitions will not work with firefox, and I'm fine with that. But this rendering problem should not happen.
The code I'm using is:
<!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>
- http://jsfiddle.net/5FZb7/
jquery mobile 1.1, . 1.0.1, 1.1 .
.