5

iOS 5 で実行しているときに、jqmobile トランジションで発生する厄介なちらつき効果を取り除こうとしています。遷移前に、ナビゲーション バーが上から 1 ピクセル (おそらく 2) ずれているためにページが再配置されると、flickr が発生することがわかりました。問題は初期化時またはデバイスのローテーション後にページが再レンダリングされた後に発生し、2 つの可能な動作結果が得られました。

  1. ちらつきなく動作し、各遷移で期待されます。
  2. 説明された点滅が表示される各遷移に落ちます。

もちろん、問題は、新しいページがレンダリングされるときにランダムに 1 つまたは 2 つ取得されることです。ありがとうございました。

4

6 に答える 6

7

あなたが持っているdata-position="fixed"場合、解決策は使用することです：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
于 2013-01-28T15:27:10.070 に答える
4

ソース: https://github.com/jquery/jquery-mobile/issues/4024#issuecomment-5124172

data-position:fixed の代わりに、ヘッダー/フッターに - 次の CSS スタイルをヘッダー、コンテンツ、フッターに適用しました。

.header {
    position : fixed;
    z-index  : 10;
    top      : 0;
    width    : 100%
}
.content {
    padding : 45px 15px
}
.footer {
    position : fixed;
    z-index  : 10;
    bottom   : 0;
    width    : 100%
}

data-position:fixed上記のリンクにあるフォーラムの何人かの人々は、これがヘッダー/フッターのあるページ間を遷移する際のフラッシュに役立ったと述べています。

Tod Parker (jQuery Mobile 作成者) からの別の提案は次のとおりです。

.ui-mobile-viewport-transitioning .ui-header-fixed,
.ui-mobile-viewport-transitioning .ui-footer-fixed { visibility: hidden; }

あるページから別のページに移行するときに、固定ヘッダー/フッターを非表示にします。

ソース: https://github.com/jquery/jquery-mobile/issues/4024#issuecomment-5250856

別の jQuery Mobile チーム メンバーによるコミットもありましたが、これは次のリリースで明らかになるはずです。投稿は次のとおりです: https://github.com/jquery/jquery-mobile/issues/4024#issuecomment-5250856 (ここに投稿するにはコードが少し複雑です)

ごく最近、このコミットにより問題は解決されました: https://github.com/Diveboard/jquery-mobile/commit/ff125b65e682ecd33888a6db1221ac441d258994。この修正は、スクロールz-indexする前に着信ページの を設定し、後で をリセットすることでした。-10z-index

私はこれらの修正を自分で試みたことはありませんが、有望なようです。

于 2012-06-16T18:33:08.533 に答える
2

ここでの方法の組み合わせでうまくいくはずです...

この問題を抱えている他の人のために、OPは言った

主にデータ位置、Webkitの背面などは完全なソリューションを提供していません。私は、あなたが提案したgithubリンクに投稿されたjqmobile 1.0からカスタムcssを設定し、最終的に機能します

于 2012-06-16T14:05:24.220 に答える
0

私の場合、スライドインパネルを取り付けるとちらつきやちらつきが発生しました。パネルが非表示の場合でも、おかしな点滅が発生します。私にとっては、折りたたみ可能な要素で発生しました。

私の「解決策」は、これをcssファイルに追加することでした:( http://api.jquerymobile.com/panel/から提案されているように) JQuery Mobile 1.3.1の場合:

div {
   -webkit-transform: translate3d(0,0,0);
 }

これはクレイジーに聞こえますが、「私にとってはうまくいきました」。(はい、すべての div)

副作用は見られないようです - まだ.

私は OpenGL でプログラムを書いたことがありますが、 -webkit-transform: translate3d(0,0,0); が何なのかわかりません。するでしょう。

于 2013-05-16T22:27:35.177 に答える
0

Cordova 2.9を使用して発見した限り、Android 4.0以降でよくある問題。および JQM 1.3: - 「なし」トランジションが指定されている場合でも、ページ トランジションの白いちらつき - ナビゲーションを行うにはダブルタップが必要

SGII、Motorola MC40、TC55 でテスト済み、すべてのプラットフォームで同じ問題。

ヘッダー、フッター、コンテンツにカスタム スタイルを使用し、data-position="fixed" を削除します

JQM の初期化を使用します ( JQM インクルードの前に JS を配置することに注意してください)

.header {
    position : fixed !important;
    z-index  : 10 !important;
    top      : 0 !important;
    width    : 100% !important;
}
.content {
    padding : 55px 15px !important;
}
.footer {
    position : fixed !important;
    z-index  : 10 !important;
    bottom   : 0 !important;
    width    : 100% !important;
}

//use this init

$(document).bind("mobileinit", function()
{
    $.mobile.defaultPageTransition = "fade"; //default, see styles
    $.mobile.transitionFallbacks='none';
    $.mobile.useFastClick = false; //300ms or double tap needed
});
于 2013-08-20T06:34:04.757 に答える
0

ここで指定されているように data-transition を追加してみてください: Firefox で jquery モバイル ページから別のページに変更したときの表示の問題

上記の回答の例を次に示します。

<a href="#page1" data-transition="fade">I am good transition</a>
<a href="#page1">And I am bad</a>
于 2012-06-12T12:08:18.163 に答える