I'm facing a problem with a scrollable div on my Html page for MOBILE. Here is the code:
<div id="outer">
<div id="inner">scrollable long content....</div>
</div>
and CSS
#outer {
background: white none repeat scroll 0 0;
height: 300px;
left: 0;
margin-top: 47px;
padding: 0.5rem;
position: absolute;
top: 0;
width:65%;
z-index: 1200;
}
#inner{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0px;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
The issue I'm encountering is that when scrolling diagonally from the top left to the bottom right on my mobile screen, Safari freezes for a few seconds. If I continue swiping diagonally repeatedly, the screen freezes for an extended period of time. I initially used jQuery mobile but after removing it, the issue still persists in simple Html as well. Can someone please provide some assistance? I require a scrollable side panel without affecting the scrolling of the main page.