I'm loading the content of a popup dynamically by taping on a button element. Ideally the popup should be positioned relative to the button, but relative to the window will do. However, on both IOS and Android the page scrolls to the very top to display the popup there. I read about IOS scrolling bugs with popups ON CLOSE, but not on open. It works just fine on a desktop computer (linux, any browser will work)

Code is simple and looks like this:

html:

don't mind the $() variables too much. This is a genshi template and the variables resolve just fine, resulting in a grid of 3x3 buttons each of which triggers loading the popup. This of course is inside a page container.

2. <div data-role="popup" id="popupGift" style="max-width:400px;max-height:600px;">TEST</div>
3.       <div id="gifts" py:if="gifts" data-role="collapsible" data-collapsed="true" data-theme="e" data-split-icon="gear" data-split-theme="d">
4. <h3>Gifts</h3>
5. <!--! create a grid with the gift icons with date below -->
6. <div class="ui-grid-b" py:for="line in splitArray(gifts,3)" py:with="classidx=['a','b','c']">
7.  <div class="ui-block-${classidx[i]}" py:for="i, gift in enumerate(line)" py:if="gift" style="text-align:center">
8.    <button id="giftbutton${gift.id}" data-giftid="${gift.id}" class="giftbutton ui-btn ui-btn-c ui-corner-all ui-mini" onclick="Util.loadProfileGift('/mobile/gifts/view?giftid=${gift.id}');return false;"><img src="${gift.icon_src}" style="width:${gift.icon_width}px;height:${gift.icon_height}px;padding:0.5em 0.5em 0.1em 0.5em;"/><span style="display:block;font-size:7pt;font-weight:bold;">${format_date(gift.date_given)}</span></button>
9.  </div>
10. </div>

This is the Util.loadProfileGift javascript:

 the loader widget shows up and the code executes just fine. The problem is that the popup open call causes the page to scroll to the top and display the popup there.

2. Util.loadProfileGift = function(url) {
3.   $.ajax({
4.     beforeSend: function() { $.mobile.loading('show'); }, //Show spinner
5.     complete: function() { $.mobile.loading('hide') }, //Hide spinner
6.     url: url,
7. dataType: 'json',
8. success: function(data) {
9. $('#popupGift').html(data.data).trigger('create');
10. $('#popupGift').popup('open');
11.           }
12.     });
13. };

In case it makes any difference on what the contents looks like, this is a typical response from the server. It's html wrapped in a json variable. Yes, it's a table. For matters of testing I kept it simple.

2. <table>
3.       <tr>
4. <td colspan="2"><a href="/view_profile?id=${gift.from_id}" style="color:black">From: ${gift.name} on ${format_date(gift.date_given)}</a></td>
5.       </tr>
6.       <tr>
7. <td style="vertical-align:top;"><a href="/view_profile?id=${gift.from_id}"><img src="${url(getBPhotoThumbSmall(gift.from_id,gift.photoid))}" alt="profile photo" style="padding-top:5px;"/></a></td>
8. <td><div py:if="gift.message">${Markup(gift.message)}</div></td>
9.       </tr>
10.     </table>

The loader widget is shown in place of the event. The scrolling to the top of the page only occurs just before the popup is shown, so it's safe to assume something happens in lines 9 and 10 of the javascript that causes the page to scroll. It's also interesting that this is consistent between IOS (7) and Android (4.1.2)

Any pointers would be more than welcome. I've been ruffing my hair over this for the last 3 days.

Uwe