Cannot scroll iframe in jquery ui dialog on ipad

Question

I have a web-application which was originally designed to be used from standard desktops and laptops, now I am trying to see if it can work "as is" also on tablets.

I tried it on an iPad 2, and I fould one major problem: the application makes heavy use of dialogs, created using jQuery UI 1.8.22, which are used as "popup", that is, each dialog contains an iframe, and when the content overflows the dialog size the vertical scrollbar appears, but I'm unable to scroll the iframe content 'cause it will always scroll the main page content.

How could this problem be solved? Do you think it is an issue with my application or with the iPad browser itself?

If it can be of any use, I'll post the code which creates the dialogs themselves, for now just let me say that, when navigated using a standard computer, there are absolutely no scrolling problems.

EDIT:

I just created this fiddle http://jsfiddle.net/MLGku/1/ which shows how we create such popups, I tried the fiddle with the iPad and in fact I cannot scroll the iframe content, I'd be very grateful for any help you'd be able to give me.

Answer 1

In the end I've been able to solve the problem by using this snipped of code:

if (/iPhone|iPod|iPad/.test(navigator.userAgent)) {
  $('iframe').wrap(function() {
    var $this = $(this);
    return $('<div />').css({
      width: $this.attr('width'),
      height: $this.attr('height'),
      overflow: 'auto',
      '-webkit-overflow-scrolling': 'touch'
    });
  });
}

The code above was found here: http://home.jejaju.com/play/iframe-scroll.html