ModalPopupExtender IFrame is blank in FireFox - firefox

Question

I have implemented a modal popup using an IFrame. I use some javascript to hide the main content (Popup2_Panel1) and display a loading message (Popup2_Panel2) while the IFrame is loading. When the IFrame has finished loading (iframe's onload event) I hide the loading message and unhide the main content (with IFrame). This works in IE/Safari/Chrome/Opera, but in FF the IFrame content is blank after the main content is made visible.
How I can make this work in FireFox? If I leave out the hide/show code then the IFrame is visible in FireFox, but I don't really want to show the content before the iframe has loaded new content, otherwise we see the old content momentarily.
Here is my code:
<script type="text/javascript">
function ShowPopup(srcUrl, titleCaption, width, height) {
var frame = document.getElementById("Popup2_Frame");
// This code causes the IFrame to be blank in FireFox
document.getElementById("Popup2_Panel1").style.display = "none";
document.getElementById("Popup2_Panel2").style.display = "";
frame.width = width + "px";
frame.height = height + "px";
var title = document.getElementById('Popup2_Caption');
if (title) {
title.innerHTML = titleCaption;
}
frame.src = srcUrl;
var mpe = $find('Popup2_MPE');
if (mpe) {
mpe.show();
}
}
function PopupLoaded(frame) {
// This code causes the IFrame to be blank in FireFox
document.getElementById("Popup2_Panel1").style.display = "";
document.getElementById("Popup2_Panel2").style.display = "none";
var mpe = $find('Popup2_MPE');
if (mpe) {
mpe._layout();
}
}
</script>
<asp:ModalPopupExtender ID="ModalPopupExtender2" runat="server" TargetControlID="ImgButton13" PopupControlID="Popup2_Window" BackgroundCssClass="popupModalBackground" OkControlID="Popup2_OK" CancelControlID="Popup2_Cancel" Drag="True" PopupDragHandleControlID="Popup2_Titlebar" BehaviorID="Popup2_MPE">
</asp:ModalPopupExtender>
<div id="Popup2_Window" class="popupWindow" style="display: none;">
<div id="Popup2_Panel1">
<div id="Popup2_Titlebar" class="popupTitlebar">
<span id="Popup2_Caption">Caption</span>
<img id="Popup2_ImgClose" runat="server" style="float: right; cursor: pointer;" src="~/Masters/_default/img/delete.png" alt="Close" onclick="javascript:document.getElementById('MainContent_Popup2_Cancel').click()" />
</div>
<div class="popupContent">
<iframe id="Popup2_Frame" class="popupFrame" frameborder="0" onload="PopupLoaded(this)"></iframe>
</div>
<div class="tasks">
<Exhibitor:ImgButton ID="Popup2_OK" runat="server" CssClass="icon" Text="OK" ImgSrc="~/Masters/_default/img/action-yes.png" />
<Exhibitor:ImgButton ID="Popup2_Cancel" runat="server" CssClass="icon" Text="Cancel" ImgSrc="~/Masters/_default/img/action-no.png" />
</div>
</div>
<div id="Popup2_Panel2" class="popupLoading">
<center>
Loading...<br />
<br />
<asp:Image ID="Popup2_ImgLoading" runat="server" ImageUrl="~/Masters/_default/img/loading.gif" />
</center>
</div>
</div>

Answer 1

The solution is to use:
frame.style.visibility = "hidden";
...
frame.style.visibility = "visible";
instead of
frame.style.display = "none";
...
frame.style.display = "";
It appears FireFox will not display the IFRAME contents at all after setting display="none" and then trying to set display="", even though it appears to be loading the URL in the background. If we set visibility to hidden the element is hidden but still takes up space so we have to do some additional juggling to give it a zero size while loading.