使用面板和頁面轉換的Jquery Mobile Glitch

我已經實現了一個使用Jquery Mobile的面板導航系統。但是，似乎在發生頁面轉換時，會出現一些圖形故障。在我的桌面Chrome上，我的頁面上的漸變看起來在轉換過程中變得粗糙。在我的移動Chrome瀏覽器上訪問同一頁面時，在轉換過程中頁面底部會出現一條白線。使用面板和頁面轉換的Jquery Mobile Glitch

通過我的測試，我發現如果我拿出面板導航，那麼圖形故障也會消失。

下面是其中一個頁面的示例。其他頁面結構相同。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Vidapp</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></sc ript> 

    <link rel="stylesheet" href="resources/custom.css" /> 
</head> 

<body> 
<div data-role="page" data-theme="a"> 

    <div data-id="header" data-role="header" data-position="fixed" data-tap-toggle="false"> 
    <a href="#sidemenu" data-icon="bars">Menu</a> 
    <h1>Contributions</h1> 
    <a href="#" data-icon="home">Gift</a> 
</div> 

<div id="sidemenu" data-role="panel" data-position-fixed="true" data-display="overlay" data-theme="a"> 
    <ul data-role="listview"> 
     <li><a href="/views/browse/trending.html">Trending</a></li> 
     <li><a href="/views/browse/friends.html">Friends</a></li> 
     <li><a href="/views/browse/contributions.html">Contributions</a></li> 
     <li><a href="/views/browse/mygifts.html">My Gifts</a></li> 
    </ul> 
</div> 

<div data-role="content"> 
    <input type="search" name="search" id="search" data-mini="true" placeholder="Have a Reference Code?" /> 
    <h2>My Contributions</h2> 
</div> 

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

的代碼在這裏舉行：Demo of Error

我想不出是什麼原因導致出現這些故障的圖形！

來源

2013-02-22 user2100944