JQM multiple links within TALL popups don't work on iOS

JQM multiple links within TALL popups don't work on iOS

I know there are some issues currently with the history and back buttons on iOS devices and at first i thought this was part of that as my close buttons where being blocked but now i'm not so sure...

on iOS devices (iphone 5s, iPad 4 both running on iOS 7/8) the default safari browser seems to have issues with links that are located with in a popup (with overlay theme or dialog type styling).  if i have a short popup that will fit on the screen without having to scroll then ALL the buttons within a popup seem to work, but if my popup is tall and forces you to have to scroll then it seems like only the FIRST anchor tag on the popup will work and the others simply anchor link to the position of the first anchor tag in the popup.  even alerts, console.log, and other onclick calls don't work.

i've tried various data-ajax=false on the links, data-history=false on the popup, e.preventDefault, return false, etc. to see if i can get the links to work with no luck.  I can't seem to replicate this issue on any windows browsers (IE9+, Firefox, Chrome, Oprea) nor on a few of the Android 5+ devices (running Chrome).


below is an example of the code to show you what i mean:

  1. <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery Mobile Demo</title>   
        <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
        <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    </head>
    <body>
    <div data-role="page" class="">

        <div role="main" class="ui-content">
           
            <h2>Example #1 - works</h2>
            <p>this popup works because popup seems to fit on most screens without scrolling.</p>
            <a href="#popupDialog1" data-rel="popup" data-position-to="window" data-transition="pop" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-delete ui-btn-icon-left ui-btn-b">Open dialog #1...</a>
            <div data-role="popup" id="popupDialog1" data-overlay-theme="b" data-theme="b" data-dismissible="false" data-history="false">
                <div data-role="header" data-theme="a">
                <h1>Popup test for iOS</h1>
                </div>
                <div role="main" class="ui-content">
                    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" onclick="alert('test');return false;" data-ajax="false">alert w onclick #1</a>
                    <h3 class="ui-title">Popup opened...</h3>
                    <p style="background:red;padding:10px;">popup content would go here.</p>
                    <a href="http://msn.com" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-ajax="false">normal external link</a>
                    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" onclick="alert('test');return false;" data-ajax="false">alert w onclick #2</a>
                    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" onclick="$('#popupDialog1').popup('close');return false;" data-ajax="false">manual close w onclick</a>
                </div><!-- /main -->
            </div><!-- /popup -->

            <br/><br/><hr/>
       
            <h2>Example #2 - Broken in iOS 7+8, 6/9 are untested</h2>
            <p>This popup doesn't work on iOS devices because you have to scroll... generally 1st anchor link will work/close but remainder of links won't work and simply seem to jump screen to first anchor in popup.</p>
            <a href="#popupDialog2" data-rel="popup" data-position-to="window" data-transition="pop" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-delete ui-btn-icon-left ui-btn-b">Open dialog #2...</a>
            <div data-role="popup" id="popupDialog2" data-overlay-theme="b" data-theme="b" data-dismissible="false" data-history="false">
                <div data-role="header" data-theme="a">
                <h1>Popup test for iOS</h1>
                </div>
                <div role="main" class="ui-content">
                    <p style="min-height:500px;background:red;padding:10px;">popup content would go here.</p>
                    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" onclick="alert('test');return false;" data-ajax="false">alert w onclick #1</a>
                    <h3 class="ui-title">Popup opened...</h3>
                    <p style="min-height:500px;background:red;padding:10px;">popup content would go here.</p>
                    <a href="http://msn.com" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-ajax="false">normal external link</a>
                    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" onclick="alert('test');return false;" data-ajax="false">alert w onclick #2</a>
                    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" onclick="$('#popupDialog2').popup('close');return false;" data-ajax="false">manual close w onclick</a>
                </div><!-- /main -->
            </div><!-- /popup -->
        </div><!-- /main -->

    </div><!-- /page -->
    </body>
    </html>