当我们从一个jQuery的移动页面更改为Firefox的另一个显示问题 [英] Display issues when we change from one jquery mobile page to another in firefox
问题描述
Code I am使用：
<！DOCTYPE html>
< html lang =en>
< head>
< title>测试< /标题>
< meta name =viewportcontent =width = device-width，minimum-scale = 1，maximum-scale = 1>
< link rel =stylesheethref =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 =pageid =page1>
< div data-role =header>
< h1> Page1< / h1>
< / div>
<按钮>按钮< /按钮>
<按钮>按钮< /按钮>
<按钮>按钮< /按钮>
<按钮>按钮< /按钮>
<按钮>按钮< /按钮>
< div data-role =content>
< 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 =pageid =page2>
< div data-role =header>
< h1>第2页< / h1>
< a href =＃page1data-back-btn =truedata-icon =backclass =ui-btn-left>返回< / a>
< / div>
< div data-role =content>
此内容适用于第2页。
< 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。
在此先感谢。
实际上并不知道为什么它能正常工作，但是指定 data-transition 会修正它。
最有意思的是， c $ c> data-transition =fade默认情况下应用，也会修复它。
< a href =＃page1data-transition =fade>我很喜欢FF12< / a>
< a href =＃page1>而我不好< / a>
I have a multi page template developed in jquery mobile.The problem I am facing is whenever I navigate from one page to another in Firefox(desktop.Version 12),the backgrounds of buttons,listview etc disappear at first,but their labels stay for a while.By that time the content of the second page appears.For a split second,the labels of the previous page is superimposed on the new page.Though it stays for a split second only,it looks weird since there are a number of components in the page.I know page transitions will not work with firefox and I am ok with that.But this rendering issue should not happen.
Code I am using:
<!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>
A demo here - http://jsfiddle.net/5FZb7/
Note:
If I use jquery mobile 1.1 version,this issue is not happening.But in my project I have to use the legacy version 1.0.1 since we have already used it for most part of the project and dont want to upgrade to 1.1 at this moment.
Thanks in advance.
Do not actually know, why does it work, but specifying data-transition fixes it.
The most interesting thing is that even data-transition="fade" which should be applied by default, fixes it too.
<a href="#page1" data-transition="fade">I am good for FF12</a>
<a href="#page1">And I am bad</a>
这篇关于当我们从一个jQuery的移动页面更改为Firefox的另一个显示问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
