interessante mobile Safari versteckte Inhalte Ausgabe

Question

Also dieses interessante Problem habe ich mit dieser Web-App in mobilen Safari, die ich noch nicht beheben konnte.

Ich habe eine "Anzeige: keine" Menü Div, die auf Klick erscheint. Wenn das Menü angezeigt wird, wird der Inhalt innerhalb des Bereichs so angezeigt, wie er sollte. Das Problem liegt innerhalb des Offscreen-Inhalts. Wenn der Div-Inhalt gescrollt wird, wird der Offscreen-Inhalt, der sich jetzt im Ansichtsfenster befindet, überhaupt nicht angezeigt, bis das Scrollen vollständig beendet ist. Es ist kein Ladeproblem, da der gesamte Inhalt bereits geladen wurde und dies auch dann passiert, wenn Sie bis zum Anfang zurückscrollen.

Dies geschieht nicht mit dem Inhalt, der tatsächlich auf der Seite ist, nur der Inhalt, der in den versteckten Menü divs geladen wird. Ich verwende keine spezielle Codierung oder irgendetwas, nur Standard-CSS und die jquery .click-Funktion. Ich habe jede erdenkliche Methode ausprobiert, um das zu beheben. Die Verwendung des eigentlichen Seitenlaufs anstelle eines Scrolls innerhalb des divs behob das Problem der Inhaltsanzeige, aber aus irgendeinem Grund würde es nicht mit Schwung blättern und das versteckte div selbst würde länger dauern, als es erscheinen sollte, vielleicht 2 Sekunden, was natürlich niemals passieren wird in Ordnung sein.

Irgendwelche Ideen, wie das zu beheben?

Bearbeiten - Code unten:

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

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

Die JQuery

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

Answer 1

figured it out, und es ist ein solcher Schüler Fehler , aber es verursacht ein echtes ly nerviges Problem. Das Hauptmenü div wurde NICHT auf "position: relative" eingestellt. was aus irgendeinem Grund dazu führte, dass der gesamte Bildschirminhalt nur dann gerendert wurde, wenn er sich innerhalb des Bildfensters befand und das Scrollen vollständig zum Stillstand gekommen war. Das ist in Desktop-Browsern nicht der Fall, weshalb es so lange dauerte, das Problem zu finden, und ich wäre nicht einmal auf die Lösung gestoßen, wenn ich aus irgendeinem Grund keine relative Position auf einem Div auf einer anderen Seite gesetzt hätte.

Wie auch immer, Problem gelöst.