Problem with iframe scrolling using data-role="popup"
I'm fairly new to JQuery, and I'm now using it just to get a popup functionality in a page where I need to show the content of other web pages inside popups.
The problem is that in Safari, on an iPad with iOS 6.0.1, the JQuery popup seems to break somehow the iframe scrolling.
Here are the relevant code snippets:
JQuery imports:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
JQuery popup div with iframe inside:
<div data-role="popup" id="popupUlt" style="width:497px; height:298px; overflow:scroll; -webkit-overflow-scrolling:touch">
<iframe src="/mobile/2770" width="497" height="298"></iframe>
</div>
If I try to scroll such div, the content actually starts moving up and the scrollbar appears, but it looks as if the offset content hasn't been rendered, so there's nothing to show beyond the visible div area.
If I add to the page a simple div which is not a JQuery popup, as in the following code, it scrolls perfectly:
<div style="width:497px; height:200px; overflow:scroll; -webkit-overflow-scrolling:touch; z-index:3">
<iframe src="/mobile/2770" width="497" height="200"></iframe>
</div>
I'd be really grateful if you could show me how to get this to work.
Thanks