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.

Matteo Tassinari · Accepted Answer · 2012-09-24 08:17:19Z

5

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

answered Sep 24, 2012 at 8:17

Matteo Tassinari

18.6k8 gold badges65 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cannot scroll iframe in jquery ui dialog on ipad

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related