iOS5 + jquery-mobile轉換閃爍

我想在iOS 5上運行時刪除jqmobile轉換上令人討厭的閃爍效果。我嘗試了其他帖子中的幾種方法，如-webkit-backface並做了一些其他工作但未完成解。我觀察到flickr發生在轉換之前，由於導航欄從頂部移動一個像素（也許是2）而重新定位頁面。問題開始於初始化或設備旋轉後，當頁面被重新呈現，然後我們有兩個可能的結果工作，iOS5 + jquery-mobile轉換閃爍

無閃爍和預期每次轉換工作。
每次出現轉折時出現所描述的眨眼。

問題當然是你在新的頁面呈現時隨機得到1或2。謝謝。這裏指定

來源

2012-06-05 Jaume

沒有使用自定義樣式你看到[這個網站]（https://github.com/jquery/jquery-mobile/issues/4024）？ – gtmtg

嘗試了一些描述的方法，但沒有運氣，但看起來很有前途。繼續嘗試... – Jaume

好的...希望它可以幫助... – gtmtg

的方法的組合here應該做的伎倆...

對於其他誰有這個問題，OP說，

主要數據位，WebKit的背面和其他人不能提供一個完整的解決方案，我設置爲從發佈了GitHub的鏈接jqmobile 1.0的自定義CSS從你的建議，最終的作品

來源

2012-06-16 14:05:24 gtmtg

嘗試添加數據轉換：Display issues when we change from one jquery mobile page to another in firefox

下面是從上述答案的例子：

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

來源

2012-06-12 12:08:18 plouh

已經嘗試過，並且在此之前做了一些工作，但不是解決方案。 .. – Jaume

來源：https://github.com/jquery/jquery-mobile/issues/4024#issuecomment-5124172

代替數據的位置是：固定到頁眉/頁腳 - I施加的以下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% 
}

上述鏈接上的論壇上的幾個人表示，這有助於在頁面之間切換時使頁面/頁腳跳轉。

從託德帕克（一個jQuery移動創建者）另一項建議是這樣的：

.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設置爲-10，然後再重置z-index。

我還沒有嘗試過任何這些修補程序，但他們似乎很有希望。

來源

2012-06-16 18:33:08 Jasper

+1最好的理解......謝謝 – Jaume

如果你有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-28 15:27:10 cherouvim

這對我有效！ Android 4.2.1，jQM 1.3.0，Cordova 2.3.0 – aalaap

這樣可以消除頁面之間的閃爍......並減少了URL欄彈出和備份的時間。儘管如此，它還沒有完全消失。 –

順便說一句，這個修復後我的閃爍的「原因」是因爲我的固定標題工具欄是2行（而不是通常的1行）。有關如何解決這個問題的好主意？ –

對於我來說，我得到了閃爍和安裝在面板上滑動時閃爍。即使面板被隱藏，閃爍的笑容也會發生，而對於我來說，發生在可摺疊的元素上。

我的「解決方案」是加入到我的css文件：（從http://api.jquerymobile.com/panel/建議）使用jQuery移動1.3.1：

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

這聽起來很瘋狂 - 但「爲我工作」。（是所有div）

似乎沒有任何副作用 - 但。我已經在OpenGL中編寫了程序，但是不知道什麼是-webkit-transform：translate3d（0,0,0）;會做。

來源

2013-05-16 22:27:35

就我發現使用Cordova 2.9而言，Android 4.0+上的常見問題。和JQM 1.3： - 即使「無」過渡指定頁面過渡白色閃爍 - 做一個導航

在測試了SGII，摩托羅拉MC40，TC55，在所有平臺上同樣的問題，需要雙水龍頭。

的頁眉，頁腳內容，刪除數據位= 「固定」

JQM的使用初始化（注意，放置JS 以前 JQM包括）

.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-20 06:34:04 OSP

iOS5 + jquery-mobile轉換閃爍

回答

相關問題