因此,這個互動問題,我在移動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>
提供代碼和問題示例的鏈接。嘗試並在沒有任何代碼的情況下直觀顯示代碼和結果是一種痛苦。 –
iOS上的框架頁面不像其他元素那樣使用彈性類型滾動進行滾動。你需要提供一些代碼片段來幫助你。 –
即將發佈代碼。該頁面沒有框架,它只是一個隱藏的div,我爲應用程序使用ajax,所以它都在一個頁面上。 – CoreyRS