Bug 15137 – onload event fire to soon causing setting incorrect iframe height.

• Component: Layout and Rendering
• Status: RESOLVED DUPLICATE

[Robert Blaut]

1. Go to a page: http://www.men.gov.pl/component/option,com_wrapper/Itemid,17/
2. Notice short iframe. Height of this iframe is controlled by widely distributed on several pages script: 

<script language="javascript" type="text/javascript">
		function iFrameHeight() {
			var h = 0;
			if ( !document.all ) {
				h = document.getElementById('blockrandom').contentDocument.height;
				document.getElementById('blockrandom').style.height = h + 60 + 'px';
			} else if( document.all ) {
				h = document.frames('blockrandom').document.body.scrollHeight;
				document.all.blockrandom.style.height = h + 20 + 'px';
			}
		}
		</script>
Initial height of a contentDocument is incorrectly reported by Safari as 0.
3. Let's go to an experiment. Try right click on a content of this frame and choose Reload.
4. Notice increasing height of iframe.
5. Repeat step 3 several times and notice increasing height of iframe.

This is strange. I suspect after reading this article: http://www.howtocreate.co.uk/safaribenchmarks.html that onload event is fired before src of iframe finishes loading. This state causes incorrect rendering of above mentioned page.

"Safari does not fire onload at the same time as other browsers. With most browsers, they will wait until the page is loaded, all images and stylesheets and scripts have run, and the page has been displayed before they fire onload. Safari does not.

In Safari, it seems onload fires before the page has been displayed, before layout has been calculated, before any costly reflows have taken place. It fires before images have completed decoding (...), meaning that a substantial part of the load time is not included"

[Mark Rowe (bdash)]

What is happening here is that the onload event for the iframe is firing after its load has completed but before it's layout has occurred.  See <http://bdash.net.nz/files/iframe-height-test.html> for a simpler example of that.  theIFrame.contentDocument.height is zero until layout has occurred.  Accessing .offsetHeight or .clientHeight triggers the layout to occur, so the next access of .height has the correct value.

The article you link to is incredibly misleading.  It suggests that onload fires before images have loaded and scripts have executed.  This is *not* the case.  It fires after the loads and script execution, but may fire before layout.

The bug here, IMO, is that accessing theIFrame.contentDocument.height does not trigger the layout to occur.   Hyatt or Mitz will be able to say for sure what the best solution is here.

*** This bug has been marked as a duplicate of 14693 ***