2012-05-05 101 views
8

因此,這個互動問題,我在移動Safari瀏覽器中的這個Web應用程序,我還沒有能夠修復。有趣的移動Safari瀏覽器隱藏內容問題

我有一個「display:none」菜單div,它出現在點擊上。顯示菜單時,div內的內容會按照其顯示的內容顯示。問題在於屏幕外的內容。當div內容滾動時,現在在視口內的離屏內容將根本不顯示,直到滾動完全停止。這不是一個加載問題,因爲所有的內容已經實際加載,而且即使當您向後滾動到頂部時,這種情況也會繼續發生。

這不會發生在頁面上的實際內容,只是在隱藏的菜單div中加載的內容。我沒有使用任何特殊的編碼或任何東西,只是標準的CSS和jQuery的.click函數。我試過了所有可以解決這個問題的方法。使用實際的頁面滾動代替div內的滾動修復了內容顯示問題,但由於某些原因,它不會以動量滾動,並且隱藏的div本身需要比它應該出現的時間更長的時間,可能是2秒,當然這絕對不會好好地。

任何想法如何解決這個問題?

編輯 - 代碼如下:

的CSS

#menu { 
width:720px; 
height:100%; 
overflow:auto; 
-webkit-overflow-scrolling:touch; 
background-color:#000000; 
display:none; 
position:absolute; 
z-index:9997; 
} 
#main-menu { 
width:100%; 
display:none; 
background-color:#000000; 
} 

的HTML

<div id="menu"> 
<div id="main-menu"> 

<a href="#templates/my-account.php" class="close"> 
<div id="menu-item"> 
    <img src="images/menu-account.png" /> 
    <div id="menu-shadow"></div> 
    <div id="menu-item-title"><div class="menu-item-title">Account Settings</div></div> 
</div> 
</a> 

<a href="#templates/my-account.php" class="close"> 
<div id="menu-item"> 
    <img src="images/menu-account.png" /> 
    <div id="menu-shadow"></div> 
    <div id="menu-item-title"><div class="menu-item-title">Account Settings</div></div> 
</div> 
</a> 

<a href="#templates/my-account.php" class="close"> 
<div id="menu-item"> 
    <img src="images/menu-account.png" /> 
    <div id="menu-shadow"></div> 
    <div id="menu-item-title"><div class="menu-item-title">Account Settings</div></div> 
</div> 
</a> 

<a href="#templates/my-account.php" class="close"> 
<div id="menu-item"> 
    <img src="images/menu-account.png" /> 
    <div id="menu-shadow"></div> 
    <div id="menu-item-title"><div class="menu-item-title">Account Settings</div></div> 
</div> 
</a> 

</div> 
</div> 

<div id="wrapper"> 
    <div class="content-loading"></div> 
    <div class="contentarea"> 
     <div class="content pageURL"></div> 
    </div> 
</div> 

<div id="btn-menu" class="bar-button"><img src="images/bar-btn-menu.png" /></div> 

jQuery的

<script type="text/javascript"> 
$('#btn-menu').click(function(){ 
    $("#menu").show(); 
    $("#main-menu").show(); 
    $("#bottom-bar-close").show(); 
}); 
</script> 
+0

提供代碼和問題示例的鏈接。嘗試並在沒有任何代碼的情況下直觀顯示代碼和結果是一種痛苦。 –

+0

iOS上的框架頁面不像其他元素那樣使用彈性類型滾動進行滾動。你需要提供一些代碼片段來幫助你。 –

+0

即將發佈代碼。該頁面沒有框架,它只是一個隱藏的div,我爲應用程序使用ajax,所以它都在一個頁面上。 – CoreyRS

回答

6

想通了,它是這樣一個男生的錯誤,但它確實造成了真實很煩人的問題。主菜單div未設置爲「position:relative;」由於某種原因導致所有關閉屏幕內容僅在視口內進行渲染,並且滾動已完全停止。這不會發生在桌面瀏覽器中,這就是爲什麼它發現問題很長時間了,如果我因爲某種原因沒有在另一個頁面上的div上設置相對位置,我甚至不會遇到該解決方案。

無論如何,問題解決了。

+0

非常感謝您在此發佈後續內容。這很快解決了我的類似問題。 –

+0

不客氣,老兄。 – CoreyRS

+0

這仍然是一個巨大的幫助!謝謝 – user801745