IPad div content does not scroll when used as popup

Question

I cannot solve this problem: I have a div that I show and hide as a popup with jquery. Content - facebook comment 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 that 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 position the popup in the center of the screen using jquery and everything works fine in all browsers. A popup will appear and I can scroll the contents.

Problem with iPad Safari. Div is not scrolling and is already trying to use webkit-overflow: touch scrolling, but nothing happens.

One more thing: if I start by displaying a popup set to "block", scrolling will work, but the contents will appear in pieces.

Any ideas? Thanks!

Answer 1

Change .mask css to auto height and make it draggable using jQueryUI draggable along y axis. In this case, the #popup div is hidden and is the "real" mask. This way you can move the current .mask div up / down, but not left / right. You just need the math to fix if the user scrolls outside the #popup div. Therefore, you need to listen to the stop event. This only works on touch screens. On the desktop client, you have to drag the div by clicking in front (but with a little 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 any correction required you can do here // eg the overscroll like on iOS } );