在頁面間導航時閃爍

Question

當我在頁面之間導航時，我的phonegap/jquery移動應用程序大部分時間閃爍。這是正常的還是有解決這個問題的？

Answer 1

是iPhone或Android的應用嗎？

我已經看到了這張貼在幾個點作爲一個可能的CSS修復的閃爍：

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

Answer 2

這是一個已知的問題，球隊稱之爲「閃爍」。他們已經公開表示，他們很快就會解決這個問題，並且已經指派了一個人。下面是提到它最近的一篇博客：

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

Answer 3

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

這個工作對我的的PhoneGap/jQuery Mobile的/ Android手機。

Answer 4

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

仍然在努力尋找一個「適當」的解決方案，但如果你沒有鍵盤輸入，我想它會工作的很好！

Answer 5

有關於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"); 
} 

另一個（更好）的方法是設置默認轉換爲jQuery Mobile的：

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

iPhone進行轉換硬件加速，而其他平臺上執行它每個軟件。這就解釋了爲什麼只有iPhone能夠平滑過渡。

Answer 6

我擺脫了iOS上的閃爍！帶有靜態頁眉和頁腳。

我有我的CSS如下，沒有數據位置=「固定」的頁眉和頁腳。

.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%; 
} 

Answer 7

我有同樣的問題，它是由我的HTML中不同頁面的重複id造成的。

儘管重複的id位於不同的html頁面中，但JQuery Mobile會將您的所有HTML文件編譯爲一個HTML文檔，以便它可以執行頁面轉換。

這導致無效的HTML並導致類似於您所描述的閃爍。

一旦我糾正了重複id問題，所有工作都很好。

UPDATE：堆棧溢出答案在這裏jQuery Mobile的https://stackoverflow.com/a/8608474/271125

Answer 8

解釋更多關於重複的ID問題，當使用CSS的解決方案

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

您可能遇到的其他問題，所以它不是一個好主意。

其實，jQuery手機v1.1.0有轉換的問題。看看this和this。

Answer 9

在你的文檔，將此代碼：

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

要禁用閃爍的轉變，在disableTransition.js文件裏，把這個代碼

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

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

解決我在Android上。

Answer 10

我有同樣的問題，但更糟的是，當在Phonegap中包裝Jquery移動應用程序時。頁面轉換不僅閃爍，而且用戶界面完全被破壞。我嘗試了大部分在這裏建議的解決方案，但沒有任何工作。然後我找到了Piotr Walczyszyn的this解決方案，一切都像夢一樣！強烈建議任何人一起使用Jquery mobile和Phonegap。

Answer 11

我嘗試了其他建議，但沒有一個爲我工作。 我最終通過改變視meta標籤如下修正它：

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

由於http://www.fishycode.com/post/40863390300/fixing-jquery-mobiles-none-transition-flicker-in

Answer 12

檢查這個環節，我有同樣的問題，所以我記錄它。

鏈接內容：

我正在開發使用JQM一個PhoneGap的Android項目。我的 項目包含固定的外部頭和外部面板。

從一個頁面導航到另一個頁面時，我看到一個白色的瞬間（整個 頁面）短暫的奇怪。我在網上搜索，但現在 適當的信息和大量的代碼在JQM核心文件上的變化。經過長時間的研究之後，我發現並希望每個人都瞭解它。

修復：更改

<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/