Ipad div content not scrolling when using as popup

Question

I can't solve this problem: I have a div that I show and hide as a popup with jquery. The content is facebook's comments plugin. This is the code:

<div id="popup">
    <div class="mask">
        <div class="fb-comments" data-href="http://www.example.com" data-num-posts="30" data-width="470" data-colorscheme="light"></div>
    </div>
</div>

This is the CSS I have so far:

#popup {
position:absolute;
left:0px;
top:0px;
width:512px;
height:530px;
background:url(../img/bg_popup.gif) repeat-x 0px 0px;
display:none;
overflow:hidden;
z-index:110;
}

#popup .mask {
margin:5px 0px 0px 10px;
width:498px;
height:475px;
overflow-y: scroll;
overflow-x: hidden;
}

I'm positioning the popup in the center of the screen with jquery, and everything works great on all browsers. The popup appears and I can scroll the content.

The problem is with Ipad Safari. The div does not scroll, and already tried using webkit-overflow-scrolling: touch, but nothing happens.

One more thing: If I start with the popup div display set to "block", scrolling works, but the content appears in pieces.

Any ideas? Thanks!

Answer 1

Change the .mask css to height auto and make it draggable using jQueryUI draggable on the y-axis. The #popup div is overflow hidden and is the "real" mask in this case. So you can move the current .mask div up/down but not left/right. You just need some math for correction, if user is scrolling outside the #popup div. Thatfore you need to listen on the stop event. This is only working on touchscreens. On a desktop client you have to drag the div by click before (but with a little bit code you can handle this).

For better touch support with jQueryUI add jQuery UI Touch Punch

Example:

$('#popup .mask').draggable(
    axis:"y",
    stop:function(event, ui){
      // If there's any correction required you can do here
      // e.g. the overscroll like on iOS
    }
);