Jquery mobile 1.2和PhoneGap 2.2.0頁面轉換閃爍

在使用JqueryMobile 1.2和PhoneGap/Cordova 2.2.0進行項目時，我遇到了頁面轉換問題，當我使用 data-transition =工作非常緩慢'，如果我使用數據轉換=無我在屏幕之間得到一個黑色閃爍，即時通訊工作與IOS 6.1'我已經嘗試所有答案我發現聽到但沒有任何作品，我仍然得到黑色閃爍，當我與數據轉換=「無」Jquery mobile 1.2和PhoneGap 2.2.0頁面轉換閃爍

我希望有人能幫助我瀏覽」聽到的是代碼：

<!doctype html> 
<html> 
<head> 
    <title> jQuery Mobile Boilerplate - Collapsibles Content</title> 

    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <!-- jQuery Mobile CSS bits --> 
    <link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" /> 

    <!-- if you have a custom theme, add it here --> 
    <link rel="stylesheet" href="themes/jQuery-Mobile-Boilerplate.css" /> 

    <!-- Custom css --> 
    <link rel="stylesheet" href="css/custom.css" /> 

    <!-- Javascript includes --> 
    <script src="js/jquery-1.8.2-min.js"></script> 
    <script src="js/mobileinit.js"></script> 
    <script src="js/jquery.mobile-1.2.0.min.js"></script> 
    <script src="js/application.js"></script> 
</head> 
<body> 
    <div data-role="page"> 

     <div data-role="header"> 
      <a href="../index.html" data-icon="home">Home</a> 
      <h1>Collapsible Content</h1> 
     </div> 

     <div data-role="content"> 




<h2>Collapsible Content Blocks</h2> 

<div data-role="collapsible"> 
    <h3>Content header</h3> 
    <p>I'm the content that shows/hides when you click the header just above me.</p> 
</div> 

<h2>Default to open</h2> 

<div data-role="collapsible" data-collapsed="false"> 
    <h3>Content header</h3> 
    <p>I'm the content that shows/hides when you click the header just above me.</p> 
</div> 

<h2>Themed</h2> 

<div data-role="collapsible" data-content-theme="c"> 
    <h3>Content header</h3> 
    <p>I'm the content that shows/hides when you click the header just above me.</p> 
</div> 

<h2>Themed - content only</h2> 

<div data-role="collapsible" data-theme="b" data-content-theme="e" > 
    <h3>Content header</h3> 
    <p>I'm the content that shows/hides when you click the header just above me.</p> 
</div> 

<h2>Nested Collapsibles</h2> 

<div data-role="collapsible" data-collapsed="false" data-theme="e" data-content-theme="c"> 
    <h3>Outer header</h3> 
    <p>I'm the content inside the main collapsible.</p> 

    <div data-role="collapsible" data-theme="c" data-content-theme="c"> 
     <h3>I'm a nested collapsible with a child collapsible</h3> 
     <p>I'm a child collapsible.</p> 
     <div data-role="collapsible" data-theme="d" data-content-theme="d"> 
      <h3>Nested inside again.</h3> 
      <p>Three levels deep now.</p> 
     </div> 
    </div> 

    <div data-role="collapsible" data-content-theme="c"> 
     <h3>Collapsed list</h3> 
     <ul data-role="listview" data-inset="true" data-theme="d"> 
      <li><a href="index.html">red</a></li> 
      <li><a href="index.html">blue</a></li> 
      <li><a href="index.html">yellow</a></li> 
     </ul> 
    </div><!-- /section 3 --> 
</div> 



     </div> 

     <div data-role="footer" data-theme="c"> 
      <p>&copy; 2012 - jQuery Mobile Boilerplate</p> 
     </div> 

    </div> 
</body> 
</html>

來源

2012-11-09 Shimon Wiener

在這裏，我帶着解決方案........ 退房 http://stackoverflow.com/a/14986718/1356174 – Yuvi

嘗試把這在您的JS：

$(document).bind("mobileinit", function(){ 
    $.mobile.defaultPageTransition = 'none'; 
    $.mobile.pushStateEnabled = false; 
    });

來源

2012-11-09 09:45:57 mram888

謝謝，我做了p但它並沒有幫助 –

這真的有效，並且需要在包含jquery之後添加這個，這是我添加此代碼並且它工作的位置，但也做了其他一些事情，比如在Android清單中使硬件加速爲false。無需更改視口選項 – Hafiz

這是我的第一篇文章，所以我沒有足夠的信譽發表評論，但我會盡我所能提供某種形式的答案吧。

我正在努力解決同一問題。在我看來，這是一個iOS 6問題，例如在iOS 5中沒有閃爍，在我的情況下是Android 2.2+。我使用$.mobile.defaultPageTransition = 'none';。

試圖回答：
檢查，以查看是否有溢出-X：藏在你的風格爲您的網頁。當我在我想要瀏覽的頁面的樣式中刪除「overflow-x：hidden」時，閃爍消失。

額外的信息：
不幸的是，在我的情況，因爲我需要的網頁是本機可滾動，「溢出-X：隱藏」是必要的固定位置的頁眉和頁腳，以保持固定而不頁面獲得iOS Webkit瀏覽器橡皮筋效果。

如果您更改頁面的背景顏色，例如紅色，您可能會看到紅色閃爍而不是黑色。至少這對我來說是如此。這應該意味着它是一個頁面背景z-index問題。 JQuery Mobile在早期版本中遇到了z-index和閃爍的問題。

我試圖做的另一件事是在調用$.mobile.changePage([...]);和我導航到的頁面之前，從當前頁面中刪除overflow-x：$("#myPage").css('overflow-x', "");。然後在頁面顯示事件中，我用$("page).css('overflow-x', "hidden");放回溢出x。但是這並沒有解決問題。我沒有橡皮筋效果，但背景仍然彈出。

我希望這個答案和額外的信息可以幫助任何人使用例如Phonegap/Cordova在iOS 6上使用JQuery Mobile 1.2.0來調查這個新問題。

來源

2012-11-09 15:55:09 xoda

感謝您的詳細解答，我沒有測試過您向我推薦的所有可能性，但它可能是我的css文件中的某些內容，生病繼續尋找它並將更新聽到 –

我做了它一個新的項目，它工作得很好，所以我的CSS我的工作 –

目前沒有解決這個問題的當前解決方案。

我甚至讀過一些IOS也有這個問題。

我在android上知道它更糟。但即時通訊不是一個「MAC」用戶，所以我無法測試這個100％。儘管我知道Iphone用戶肩上有這個問題。

Android + Jquery Mobile只是有這個問題atm。

Page Transitions劑量在android上按預期工作，有頁面閃爍，雙眨眼等。即使你關閉了轉換，你仍然會得到一個網站在過去的日子裏會產生的舊「眨眼」。

有一些「誰報告說他們已經修復了50％」，但這些解決方案非常個人化，並且可以爲所有人服務。

我不覺得我想給你一半的答案，我寧願要告訴你，jQuery Mobile的正在開發中，如果我在那裏你，我會等待它:)

我希望我的回答給了你需要你的想法:)

來源

2012-12-25 17:58:52 Daniel

Jquery mobile 1.2和PhoneGap 2.2.0頁面轉換閃爍

回答

相關問題