Scroll with iframe in phonegap iOS - html

Question

If have an iframe in my PhoneGap app. The frame has been given a height of 1000.
By adjusting its width to 50% I can scroll by touching the parent on the space next to the frame. But when I try to scroll by touching the frame itself, there is no response.
I looked for this problem and some issues have been reported that came with a solution including the -webkit-overflow-scrolling: touch; but no luck.
#content_wrap {
display: inline-block;
float:left;
width:100%;
overflow-x:hidden;
position:relative;
height:auto;
z-index:300;
}
#content_wrap .content_container {
position:absolute;
left:0px;
display:inline-block;
float:left;
width:100%;
padding:0;
min-height:100%;
height:auto;
background-color:#FFF;
}
#tickets {
display:inline-block;
float:left;
width:50%;
margin:0px;
height:auto;
}
#ticketFrame {
height:1000px;
display:inline-block;
float:left;
width:100%;
}
The html:
<div id="content_wrap">
<div class="content_container">
<div id="tickets">
<iframe src="someurl" frameborder="0" id="ticketFrame"></iframe>
</div>
</div>
</div>
I am a fan of using display inline block and float left as u can see ;)
What to do to be able to scroll with touchscreen in phonegap?

Answer 1

maybe problem is your iframe tag? </iframe">
if its not, add/change your css and try again.
html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
#content_wrap {
display: inline-block;
float:left;
width:100%;
overflow-x:hidden;
position:relative;
height:100%;
z-index:300;
}
#content_wrap .content_container {
position:absolute;
left:0px;
display:inline-block;
float:left;
width:100%;
padding:0;
min-height:100%;
height:auto;
background-color:#FFF;
}
#tickets {
display:inline-block;
float:left;
width:50%;
margin:0px;
height:100%;
right: 0;
bottom: 0;
left: 0;
top: 0;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
#ticketFrame {
height:1000px;
display:inline-block;
float:left;
width:100%;
}