ASP.NET Application not working on iPad

Question

I have an ASP.NET application and I'm having an issue with something working on the iPad. Here is my relevant html code:

<div style="display: none" id="dialogShowInvoice">
    <div style="width: 100%; height: 100%;" id="divInvoice"></div>
</div>

and here is my relevant jQuery/javascript code:

$(function() {
    $('#dialogShowInvoice').dialog({
        autoOpen: false,
        draggable: true,
        resizable: false,
        modal: true,
        title: 'Invoice',
        width: ($(window).width() - 50),
        height: ($(window).height() - 50),
        closeOnEscape: true
    });

...
...

    $('.showInvoiceButton').click(function (event) {
        $('#dialogShowInvoice').dialog('open');
        $('#divInvoice').html("<iframe src='ShowInvoiceHandler.ashx?id=" + event.target.id.replace('btnShowInvoice', '') + "'></iframe>");
        $('#divInvoice iframe').height($(window).height() - 125);
        $('#divInvoice iframe').width($(window).width() - 100);
    });
});

Now in Internet Explorer, Chrome and FireFox, everything works beautifully. On the Galaxy Tab, it works great too. The only issue I'm having is with iPad. On the iPad, the jQuery window does pop up, but the inside of it is grey (that's the iframe area) and nothing happens. However, if I move the jQuery window (since its draggable), the PDF will suddenly show up. All I got to do is drag the jQuery window one pixel in any direction and this somehow makes the PDF show up inside the window.

What could be causing this odd behavior on iPad and how can I fix that the PDF shows up automatically without having to drag the jQuery window?

Edit: Its probably worth it to mention that it does not do this on Safari, running on an iMac. The issue literally seems to be with iPad devices only.

Answer 1

It seems there is a problem with "modal: true" in Safari and it does not render content of iframe until resize or move of the dialog window.

The solution that works is to set

modal: false,

If you need a modal window you can add another "layer" which will disable all content and show non-modal dialog over it.

 <style>
   #overlay {
      background-color: rgba(0, 0, 0, 0.8);
      z-index: 99;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: none;
   }

   #dialogShowInvoice
   {
      z-index: 9999 
   }
 </style>

 ...
 <div id="overlay"></div>

Then disable screen before opening the dialog

$('.showInvoiceButton').click(function (event) {
     $("#overlay").show();
     ...

And enable it again when dialog is closed

$('#dialogShowInvoice').dialog({
    ...
    modal: false,
    ...,
    close: function( event, ui ) {
       $("#overlay").hide();
    }
}); 

Demo: http://jsbin.com/lumoweja/1#