html - Why is a self-closing iframe tag preventing further DOM elements to be displayed?

Question

On Firefox and Safari, the following code displays only the first iframe

<iframe src="http://www.bing.com"/>
<iframe src="http://www.tsr.ch"/>

whereas adding the closing tag solves the issue

<iframe src="http://www.bing.com"></iframe>
<iframe src="http://www.tsr.ch"></iframe>

I don't understand why it does not work. When parsing the second example with DOMParser, it anyways does the transformation to self-closing iframes.

fiddle here : http://jsfiddle.net/hLcukz6p/

Answer 1

Because the iframe element isn't a self-closing element. The versions of Firefox and Safari you're using are treating the /> at the end as just > and assuming everything after it is contained within the iframe.

If we attempt to pass the code you've given through W3C's validator we'll see the following errors:

Error: Self-closing syntax (/>) used on a non-void HTML element. Ignoring the slash and treating as a start tag.

<iframe src="http://www.bing.com"/>

Error: End of file seen when expecting text or an end tag.

</html>

Error: Unclosed element iframe.

<iframe src="http://www.bing.com"/>

If you inspect your document with your browser's Element Inspector, you'll see what's going on.

Chrome, which I'm using, converts the invalid <iframe ... /> to <iframe ...></iframe>: