Created attachment 321021 [details] A HTML file showing the bug. If you write to an iframe, innerWidth and innerHeight are 0 inside the iframe, even after the window "load" event fires. However, even 50ms later the dimensions are correct. This may be because the load event is fired too early, or because these properties are not set correctly. This behavior works as expected on other browsers (the width and height represent the dimensions of the iframe from the outset). Rather than try to explain the exact circumstances required to reproduce this, I'm going to include the following example which I used to confirm this issue (also attached). <!DOCTYPE HTML> <html> <body> <iframe src="about:blank" id="frame"></iframe> <script> var doc = document.getElementById("frame").contentDocument; doc.open(); doc.write(`<script> console.log("start", innerWidth); window.addEventListener("load", function () { console.log("onload", innerWidth); //Doesn't work. Prints 0 }); window.setTimeout(function () { console.log("50ms", innerWidth); //Works }, 50); </scr` + "ipt>"); doc.close(); </script> </body> </html>
I think that this is probably more of an accidental implementation artifact of other browsers. The load event only means that subresources were loaded, not that layout is complete.
Thanks for that explanation, it helped me understand what's going on better. I tried the "DOMContentLoaded" event listener, but that didn't work. However, setTimeout(function, 0) did work, because that apparently pushes itself to the end of the command queue, after layout is done. It still seems counter-intuitive that the load listener fires before the layout is completed in this one case in this one browser, and that there's no official way to ensure layout is finished.
I would expect innerWidth to force a layout.