first timer here!
I am seeing some undesirable behavior when using Safari 8 in Mac OS Yosemite related to the height of dialogs created with the JS function window.showModalDialog(). Is this a browser bug or something else? I would like to be able to open dialogs with consistent height in all browsers without needing to conditionalize for Safari 8.
The behavior is as follows:
When displaying a new modal, its height is less than expected. If I right-click the top area of the modal and select "Customize Toolbar", the correct height is restored. When clicking Done for the customize options, the window may gain height again, this time displaying more height than is desired.
When the general Safari setting for View > Show Status bar is enabled, the dialog renders at the desired height. When the status bar is disabled, the dialog renders at an incorrect height.
Additional Information
Screenshots with descriptions: http://imgur.com/KqrHZs4
Safari 8 and 6.2 will sometimes report incorrect values (see screenshots) the first time the dialog is opened. When right-clicking the page and selecting "Reload", the page refreshes with the correct values.
I don't think it is possible to hide the URL bar, which I assume to be part of the problem related to the window height real estate.
CODE - Test page that launches a modal dialog.
<!DOCTYPE html>
<html>
<head>
<title>Testing Modal Dialog Heights</title>
<script type="text/javascript">
function openModal()
{
var url = "modal.html";
var args = null;
var features = "resizable:no;scroll:no;status:no;center:yes;help:no;dialogwidth:400px;dialogheight:400px";
window.showModalDialog(url, args, features);
}
</script>
</head>
<body>
<button onclick="openModal()">Open Modal</button>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>This is the modal</title>
<style type="text/css">
body
{
width:100%;
height:100%;
}
#Results
{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}
</style>
<script type="text/javascript">
window.onload = doOnLoad;
function doOnLoad()
{
window.menubar.visible = false;
window.locationbar.visible = false;
window.toolbar.visible = false;
window.statusbar.visible = false;
window.personalbar.visible = false;
/* Test one */
var pResults = document.getElementById("Results");
pResults.innerHTML += "clientHeight: " + pResults.clientHeight + "<br />";
pResults.innerHTML += "clientWidth: " + pResults.clientWidth + "<br /><br />";
pResults.innerHTML += "offsetHeight: " + pResults.offsetHeight + "<br />";
pResults.innerHTML += "offsetWidth: " + pResults.offsetWidth + "<br /><br />";
/* Test two */
var pResults = document.getElementById("Results");
pResults.innerHTML += "window.innerHeight: " + window.innerHeight + "<br />";
pResults.innerHTML += "window.innerWidth: " + window.innerWidth + "<br /><br />";
pResults.innerHTML += "window.outerHeight: " + window.outerHeight + "<br />";
pResults.innerHTML += "window.outerWidth: " + window.outerWidth + "<br /><br />";
pResults.innerHTML += "window.devicePixelRatio: " + window.devicePixelRatio + "<br />";
pResults.innerHTML += "window.locationbar.visible: " + window.locationbar.visible + "<br />";
pResults.innerHTML += "window.menubar.visible: " + window.menubar.visible + "<br />";
pResults.innerHTML += "window.toolbar.visible: " + window.toolbar.visible + "<br />";
pResults.innerHTML += "window.statusbar.visible: " + window.statusbar.visible + "<br />";
pResults.innerHTML += "window.personalbar.visible: " + window.personalbar.visible + "<br />";
}
</script>
</head>
<body>
<div id="Results">Modal coded to be 400H, 400H. <br /> <br /></div>
</body>
</html>
window.showModalDialog vs. window.open
Intenet Explorer seams to be the only one that implements showmodaldialog. So instead I would use window.open
then use some php to process the next page