the first timer is here!
I see unwanted behavior when using Safari 8 on Mac OS Yosemite related to the height of the dialogs created using the JS function window.showModalDialog () . Is this a browser error or something else? I would like to be able to open dialogs with constant height in all browsers without requiring installation 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 modality and select "Customize Toolbar", the correct height will be restored. When you click Finish for the settings, the window can again increase the height, this time displaying a higher height than desired.
If the general Safari setting is enabled for the View panel> Show Status, the dialog will be displayed at the required height. When the status bar is disabled, the dialog displays the wrong height.
Additional Information
Screenshots with descriptions: http://imgur.com/KqrHZs4
Safari 8 and 6.2 sometimes report incorrect values (see screenshots) the first time you open a dialog. When you right-click on a page and select "Reload", the page refreshes with the correct values.
I don’t think it’s possible to hide the URL bar, which I believe is part of the real estate problem with the window height.
CODE is a 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; 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 />"; 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>
source share