Question

So this intersting problem I’m having with this web app in mobile safari that I haven’t been able to fix as of yet.

I have a “display:none” menu div that appears on click. When the menu is displayed, the content within the div displays as it should. The problem lies within the offscreen content. When the div content is scrolled, the offscreen content that is now within the viewport wont show at all until the scrolling has completely stopped. It’s not a loading issue because all the content has actually loaded already, and this continues to happen even when you scroll back up to the top.

This doesnt happen with the content that is actually on the page, just the content that is loaded within the hidden menu divs. I’m not using any special coding or anything, just standard css and the jquery .click function. I’ve tried every method I can think of to fix this. Using the actual page scroll instead of a scroll within the div fixed the content display issue, but for some reason it wouldnt scroll with momentum and the hidden div itself would take longer than it should to appear, maybe like 2 seconds which of course will never be okay.

Any ideas how to fix this?

Edit – Code below:

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

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

The JQuery

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

Answer 1

Figured it out, and it’s such a schoolboy mistake, but it does cause a really annoying issue. The main-menu div was NOT set to “position:relative;” which for some reason caused all off screen content to only render when it was within the viewport and scrolling had come to a complete stop. This doesnt happen in desktop browsers which is why it was so long finding the problem, and I wouldnt have even come across the solution if I didn’t for some reason set a relative position on a div on another page.

Anyway, problem solved.