title: interesting mobile safari hidden content issue
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Any ideas how to fix this?</p>
  
  <p>Edit - Code below:</p>
  
  <p>The CSS</p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>The HTML</p>
  
  <pre><code>&lt;div id="menu"&gt;
  &lt;div id="main-menu"&gt;
  
  &lt;a href="#templates/my-account.php" class="close"&gt;
  &lt;div id="menu-item"&gt;
     &lt;img src="images/menu-account.png" /&gt;
     &lt;div id="menu-shadow"&gt;&lt;/div&gt;
     &lt;div id="menu-item-title"&gt;&lt;div class="menu-item-title"&gt;Account Settings&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/a&gt;
  
  &lt;a href="#templates/my-account.php" class="close"&gt;
  &lt;div id="menu-item"&gt;
     &lt;img src="images/menu-account.png" /&gt;
     &lt;div id="menu-shadow"&gt;&lt;/div&gt;
     &lt;div id="menu-item-title"&gt;&lt;div class="menu-item-title"&gt;Account Settings&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/a&gt;
  
  &lt;a href="#templates/my-account.php" class="close"&gt;
  &lt;div id="menu-item"&gt;
     &lt;img src="images/menu-account.png" /&gt;
     &lt;div id="menu-shadow"&gt;&lt;/div&gt;
     &lt;div id="menu-item-title"&gt;&lt;div class="menu-item-title"&gt;Account Settings&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/a&gt;
  
  &lt;a href="#templates/my-account.php" class="close"&gt;
  &lt;div id="menu-item"&gt;
     &lt;img src="images/menu-account.png" /&gt;
     &lt;div id="menu-shadow"&gt;&lt;/div&gt;
     &lt;div id="menu-item-title"&gt;&lt;div class="menu-item-title"&gt;Account Settings&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/a&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="wrapper"&gt;
     &lt;div class="content-loading"&gt;&lt;/div&gt;
     &lt;div class="contentarea"&gt;
        &lt;div class="content pageURL"&gt;&lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="btn-menu" class="bar-button"&gt;&lt;img src="images/bar-btn-menu.png" /&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The JQuery</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $('#btn-menu').click(function(){
      $("#menu").show();
      $("#main-menu").show();
      $("#bottom-bar-close").show();
  });
  &lt;/script&gt;
  </code></pre>