web-dev-qa-db-ja.com

ページ間を移動するときのちらつき

Phonegap/jqueryモバイルアプリケーションは、ページ間を移動するときにほとんどちらつきます。これは正常ですか、またはこれに対する解決策はありますか？

cordovajquery-mobile
65
mike643
.ui-page {
    -webkit-backface-visibility: hidden;
}

これはphonegap/jquery mobile/Android phone。

40
Decoy

Androidのちらつきに関するニュース（2012-01-10）があります。 http://jquerymobile.com/blog/2012/01/10/upcoming-releases-1-0-1-1-1を参照してください。 -and-beyond /

引用：Android 2.xのようなパフォーマンスの低いプラットフォームを除外しますスムーズなエクスペリエンスを確保するためのすべての移行。

このスレッドのCSSソリューションは、私にとっては機能しませんでした（Android 2.x）。

すべてのリンクでdata-transition="none"を使用してトランジスタを無効にしましたが、すべて問題ありませんでした。ページレベルで設定した場合も機能するはずですが、私にとっては機能しませんでした（jQuery Mobile 1.0）。これはコードです：

// turn off animated transitions for Android
if (navigator.userAgent.indexOf("Android") != -1)
{
    $("a").attr("data-transition", "none");
}

もう1つの（より良い）方法は、jQuery Mobileのデフォルトの遷移を設定することです。

$(document).bind("mobileinit", function()
{
    if (navigator.userAgent.indexOf("Android") != -1)
    {
        $.mobile.defaultPageTransition = 'none';
        $.mobile.defaultDialogTransition = 'none';
    }
});

iPhoneはハードウェアアクセラレーションによる移行を実行しますが、他のプラットフォームはソフトウェアごとに実行します。これは、iPhoneだけがスムーズな移行を実行する理由を説明しています。

18
ChrLipp

私は他の提案を試みましたが、それらのどれも私のために働きませんでした。ビューポートメタタグを次のように変更して修正しました。

<meta name="viewport" content="width=device-width, user-scalable=no" />

http://www.fishycode.com/post/40863390300/fixing-jquery-mobiles-none-transition-flicker-in に感謝

16
Lucas

IOSのちらつきを取り除きました！静的ヘッダーとフッター付き。

私は次のようにCSSを持っていますが、ヘッダーとフッターにdata-position = "fixed"はありません。

.ui-mobile, .ui-mobile .ui-page, .ui-mobile [data-role="page"],
.ui-mobile [data-role="dialog"], .ui-page, .ui-mobile .ui-page-active {
      overflow: hidden;
      -webkit-backface-visibility: hidden;
}

.ui-header {
    position:fixed;
    z-index:10;
    top:0;
    width:100%;
    padding: 13px 0;
    height: 15px;
}

.ui-content {
    padding-top: 57px;
    padding-bottom: 54px;
    overflow: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.ui-footer {
    position:fixed;
    z-index:10;
   bottom:0;
   width:100%;
}
3
Sarah-Jane

アプリはiPhoneまたはAndroid向けですか？

私はこれがちらつきのCSS修正の可能性としていくつかの場所に投稿されているのを見ました：

#YourApp {
    -webkit-backface-visibility: hidden;
    overflow: hidden;
}
2
avoision

FIY：先週CSS修正を使用しましたが、先へ進むと別の問題が発生しました。

私のアプリには連絡先ページがあります-ここに記載されている説明に従うと、かなり簡単です（ http://jquerymobile.com/demos/1.0a4.1/docs/forms/#forms-text.html ） 。

ただし、テキスト入力フィールドにフォーカスするとすぐに、ページは上下に「ジャンプ」（読み取りスクロール）します。テキストを入力するときにジャンプすることもあります。動作が非常にランダムである原因を説明するのは少し難しいですが、それについての議論があります。ちらつきの修正を無効にするというアイデアもそこから来ています。 https://github.com/jquery/jquery-mobile/issues/2683#commits-ref-d195354

「適切な」解決策を見つけるのに苦労していますが、キーボード入力がない場合はうまくいくと思います！

1
notYetRegistered

このリンクを確認してください、私は同じ問題を抱えていたので、それを文書化しました。

リンクコンテンツ：

JQMを使用しているphoneGap Androidプロジェクトを開発しています。私のプロジェクトには、固定外部ヘッダーと外部パネルが含まれています。

あるページから別のページに移動しているときに、少しの間、白い点滅（ページ全体）が奇妙に見えます。オンラインで検索しましたが、JQM Coreファイルの適切な情報と多くのコードが変更されました。長い研究の後、私はそれを理解し、誰もがそれについて知ってほしい。

修正：変更

<meta name = "viewport" content="width=device-width, initial-scale=1" />

に

<meta name = "viewport" content="width=device-width, user-scalable = no" />

https://shariefmohatad.wordpress.com/2014/06/12/blinkingflickering-with-jqmobile-and-phonegap-aka-phonegap-on-Android-2/

0
socialCoder

同じ問題を抱えていましたが、PhonegapでJqueryモバイルアプリをラップするとさらに悪化しました。ページの遷移がちらつくだけでなく、UIが完全に壊れていました。ここで提案した解決策のほとんどを試しましたが、何も機能しませんでした。それから私は this Piotr Walczyszynによる解決策を見つけました、そしてすべてが夢のように働きました！ Jquery mobileとPhonegapを一緒に使用する方に強くお勧めします。

0
Per Quested Aronsson

ドキュメントに、次のコードを配置します。

<script src="disableTransition.js"></script>

フリッカー遷移を無効にするには、disableTransition.jsファイル内にこのコードを配置します

$(document).bind("mobileinit", function(){
 $.extend(  $.mobile , {
 defaultPageTransition: 'none' 
});

 $.mobile.defaultPageTransition = 'none';
 $.mobile.defaultDialogTransition = 'none';
});

Androidで解決しました。

0
Suhas Dwarkanath

これは、チームが「点滅」と呼ぶ既知の問題です。彼らはすぐにこれに取り組み、すでに誰かを割り当てていると公に言っています。これについて言及している最近のブログ投稿は次のとおりです。

http://jquerymobile.com/blog/2011/05/06/jquery-mobile-team-update-week-of-may-2/

0
Spike

私も同じ問題を抱えていましたが、それはHTMLの異なるページ間で重複したIDが原因でした。

重複するIDが異なるhtmlページにあったとしても、JQuery MobileはすべてのHTMLファイルを1つのHTMLドキュメントにコンパイルし、ページの移行を実行できるようにします。

これにより、無効なHTMLが発生し、説明と同様の点滅が発生していました。

重複IDの問題を修正すると、すべてがうまく機能しました。

更新：JQuery Mobileの重複IDの問題について詳しく説明するスタックオーバーフローの回答 https://stackoverflow.com/a/8608474/271125

0
elMarquis

CSSソリューションを使用する場合

.ui-page {
    -webkit-backface-visibility: hidden;
}

他の問題が発生する可能性があるため、お勧めしません。

実際、jQuery mobile v1.1.0には移行に関する問題があります。 this および this を見てください。

0
Alexandr Zaitsev