interessante contenuto nascosto di Safari per cellulare

Question

Quindi questo problema che sto attraversando è con questa app web in Safari mobile che non ho ancora potuto correggere.

Ho un div menu "display: none" che appare al clic. Quando viene visualizzato il menu, il contenuto all'interno di div viene visualizzato come dovrebbe. Il problema si trova all'interno del contenuto fuori schermo. Quando si scorre il contenuto div, il contenuto fuori schermo che si trova ora nella vista non viene visualizzato fino a quando lo scorrimento non si è completamente interrotto. Non è un problema di caricamento perché tutto il contenuto è già stato caricato e questo continua ad accadere anche quando si scorre indietro fino all'inizio.

Questo non accade con il contenuto che è effettivamente sulla pagina, solo il contenuto che viene caricato all'interno del menu nascosto div. Non sto usando alcuna codifica speciale o altro, solo css standard e la funzione jquery .click. Ho provato ogni metodo che posso pensare per risolvere questo problema. Usando lo scroll effettivo della pagina invece di uno scroll all'interno del div è stato risolto il problema di visualizzazione del contenuto, ma per qualche motivo non scorrerebbe con lo slancio e il div nascosto avrebbe richiesto più tempo di quello che dovrebbe apparire, forse come 2 secondi che, naturalmente, non saranno mai stare bene.

Qualche idea su come risolvere questo problema?

Modifica - codice qui sotto:

Il 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; 
} 

Il codice 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> 

Il JQuery

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

Answer 1

capito, ed è un tale errore scolaro , ma causa un reale l problema fastidioso. Il div del menu principale NON era impostato su "posizione: relativo;" che per qualche ragione ha causato il rendering di tutto il contenuto dello schermo solo quando era all'interno del viewport e lo scorrimento era completamente fermo. Ciò non accade nei browser desktop, motivo per cui è stato così lungo trovare il problema, e non mi sarei mai imbattuto nella soluzione se per qualche motivo non avessi impostato una posizione relativa su un div su un'altra pagina.

In ogni caso, problema risolto.