2

私はjquerymobileで開発されたマルチページテンプレートを持っています。私が直面している問題は、Firefox（デスクトップバージョン12）であるページから別のページに移動するたびに、ボタン、リストビューなどの背景が最初に消えますが、それらのラベルはしばらくすると、2ページ目のコンテンツが表示されます。一瞬の間、前のページのラベルが新しいページに重ねられます。一瞬だけ残りますが、数が多いため、奇妙に見えます。ページ内のコンポーネント。ページ遷移が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にアップグレードしたくないため、プロジェクトではレガシーバージョン1.0.1を使用する必要があります。 。

前もって感謝します。

4

1 に答える 1

2

実際にはわからない、なぜそれが機能するのか、指定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>
于 2012-06-06T12:11:07.553 に答える