can't get iScroll to properly scroll the div with jQuery Mobile - jquery-mobile

Question

I'm using jQuery Mobile to build up a mobile website.
On one page I have a bunch of texts to display in a div.
I coded according to the simple example of iScroll 4.
I get it right in my Chrome Browser, but when I test it in mobile safari, I can swipe down the text a bit but it will bounce back, rather than scroll down.
Here's the HTML Markup:
<div data-role="content">
<div class="text-content-wrapper">
<div id="scroll-wrapper">
<ul>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
</div>
and the CSS is:
.text-content-wrapper {
width: 80%;
height: 240px;
position: absolute;
left: 35px;
top: 65px;
overflow: auto;
padding: 10px 0;
background-color: white;
opacity: 0.8;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
z-index: 1;
}
#scroll-wrapper ul{
position: absolute;
z-index: 1;
width: 100%;
list-style: none;
text-align: left;
height: 360px;
}
If I move the position: absolute to #scroll-wrapper, it won't even work in the chrome.
And use the iScroll:
var myScroll1;
function loaded() {
myScroll1 = new iScroll('scroll-wrapper');
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);