当我们在 Firefox 中从一个 jquery 移动页面更改为另一个时显示问题答案

【问题标题】：Display issues when we change from one jquery mobile page to another in firefox当我们在 Firefox 中从一个 jquery 移动页面更改为另一个时显示问题
【发布时间】：2012-06-03 06:57:51
【问题描述】：

我在 jquery mobile 中开发了一个多页面模板。我面临的问题是，每当我在 Firefox（桌面。版本 12）中从一个页面导航到另一个页面时，按钮、列表视图等的背景首先会消失，但它们标签停留片刻。此时出现第二页的内容。一瞬间，上一页的标签叠加在新页面上。虽然它只停留一瞬间，但看起来很奇怪，因为有页面中有许多组件。我知道页面转换不适用于 firefox，我对此表示满意。但是这个渲染问题不应该发生。

我正在使用的代码：

<!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此刻。

提前致谢。

【问题讨论】：

标签： jquery firefox jquery-mobile

【解决方案1】：

实际上不知道，为什么它会起作用，但指定 data-transition 可以解决它。
最有趣的是，即使是应该默认应用的data-transition="fade"，也修复了它。

   <a href="#page1" data-transition="fade">I am good for FF12</a>
   <a href="#page1">And I am bad</a>

【讨论】：