Interesting issue with hidden safari content

Question

So, this is an interesting problem that I encounter with this web application in mobile safari, which I have not yet been able to fix.

I have a "display: none" menu that appears when clicked. When a menu is displayed, the content in the div is displayed as it should. The problem is off-screen content. When the contents of a div are scrolled, off-screen content, which is now in the viewport, is usually not displayed until the scrolling is completely stopped. This is not a loading problem, because all the content has already been downloaded, and it continues even when you scroll back up.

This does not happen with the content that is actually on the page, just the content that is loaded into the hidden div of the menu. I do not use any special coding or anything else, just standard css and jquery.click. I have tried every method that I can come up with to fix this. Using the actual scroll of the page instead of scrolling into the div eliminates the problem of displaying the content, but for some reason it will not scroll with impulse, and the hidden div itself will take longer than it should appear, maybe like 2 seconds, which, of course, everything will never be alright.

Any ideas how to fix this?

Edit - Code below:

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

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> 

JQuery

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

Answer 1

I thought, and this is such a mistake student, but it really causes a very annoying problem. "Position: relative" was not set in the main menu; which for some reason caused the entire contents of the screen to be displayed only when it was in the viewport, and the scroll ended completely. This does not happen in desktop browsers, so it took so long to find the problem, and I would not even have found a solution if for some reason I had not set the relative position on the div on another page.

In any case, the problem is resolved.