javascript - IFrame in jQuery UI dialog sometimes doesn't load content in Chrome until dialog is moved or resized (but works in FF and Edge)

Question

This is a truly odd one. I have a site which makes heavy use of jQuery UI dialogs to then show an iframe. The iframe loads content from the site itself, so there are no origin issues.

Works perfectly in FireFox and Edge. But in Chrome (my version is 87), it sometimes just displays a white, blank dialog UNTIL you click the titlebar and move it! Or, until you open the Developer Tools.

This was driving me absolutely crazy, but I eventually found two solutions (posted below) if anyone else has this same weird problem.

question from:https://stackoverflow.com/questions/65874924/iframe-in-jquery-ui-dialog-sometimes-doesnt-load-content-in-chrome-until-dialog

Answer 1

STEP ONE: I had to add a bit of code for when the iframe is finished loading. Ex:

// if we are inside our iframe...
$(document).ready(function() { parent.nudgeiFrame(); });

This calls a function on the PARENT page that is loading the dialog, not from within the iframe itself!

SOLUTION #1 (less elegant)

It would "nudge" the entire dialog by one pixel, after a brief delay. This worked extremely well, but it has the downside of making your dialog slowly move down the screen if they keep reloading it. Most users probably would never notice it, so I kept this option for a while:

function nudgeiFrame() {
  setTimeout(function() {
    $("div[role=dialog]").each(function() {
        
        $(this).addClass('ui-draggable-dragging');        
        $(this).addClass('ui-dialog-dragging');
        var y = $(this).css('top');
        var oldy = y;        
        y = parseFloat(y.replace("px", ""));        
        var newy = (y + 1) + "px";              
        $(this).css('top',  newy);
        
     });
  }, 75);
}

SOLUTION #2 (More elegant)

I discovered (through HOURS of testing) that all I really needed to do was to add content to the dialog (not the iframe).

I decided to add a simple so that it wouldn't cause the dialog to resize or anything like that. Believe it or not, this works and doesn't cause any ill-effects that I can see.

function nudgeiFrame() {
  setTimeout(function() {
    $("div[role=dialog]").each(function() {
        
        $(this).append("<span></span>");

     });
  }, 75);
}

I hope this helps someone out there. Took me such a long time to figure out.