interesante problema de contenido oculto de safari móvil

Question

Así que este problema intersting que estoy teniendo con esta aplicación web en el safari móvil que no he podido solucionar aún.

Tengo un menú "display: none" que aparece al hacer clic. Cuando se muestra el menú, el contenido dentro del div se muestra como debería. El problema se encuentra dentro del contenido fuera de pantalla. Cuando se desplaza el contenido div, el contenido fuera de pantalla que está ahora dentro de la ventana gráfica no se mostrará hasta que el desplazamiento se haya detenido por completo. No es un problema de carga porque todo el contenido ya se ha cargado, y esto continúa sucediendo incluso cuando se retrocede hasta la parte superior.

Esto no sucede con el contenido que está realmente en la página, solo el contenido que se carga dentro de los divs ocultos del menú. No estoy usando ninguna codificación especial ni nada, solo CSS estándar y la función jquery .click. He intentado todos los métodos que puedo pensar para solucionar esto. Usar el desplazamiento de página real en lugar de un desplazamiento dentro del div solucionó el problema de visualización de contenido, pero por alguna razón no se desplazaría con impulso y el div oculto tardaría más de lo que debería aparecer, tal vez como 2 segundos que, por supuesto, nunca estar bien.

¿Alguna idea de cómo solucionar esto?

Editar - código de abajo:

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

El 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> 

El JQuery

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

Answer 1

lo descubrió, y es un error tan colegial , pero causa un verdadero problema molesto. El div del menú principal NO se configuró en "posición: relativa"; que por alguna razón causaba que todo el contenido fuera de la pantalla solo se procesara cuando estaba dentro de la ventana gráfica y el desplazamiento se había detenido por completo. Esto no sucede en los navegadores de escritorio, razón por la cual tardé tanto en encontrar el problema, y ​​ni siquiera me habría encontrado con la solución si, por alguna razón, no hubiera establecido una posición relativa en un div en otra página.

De todos modos, problema resuelto.