iFrame content doesn't show in IE8

Question

I have a site with an iFrame.

The host page has some very basic JS on it, the iframed page has simple JS too.

When I embed the iframe as usualy: <iframe src="iframeURL" width="900" height="1000"></iframe> it works fine in all browsers but IE8.

I tried various things:

• first: disabling all JS
• removing src attribute and adding it with JS
• using <object> instead
• I used proxy.php to make the content appear as if it were coming from the same domain

It doesn't work in IE8 regardless what I do.

The funny thing is that I can open the page I want to iframe in a separate tab and works just fine.

If I change the src attribute to "some_other_random_page_from_internet" it works.

The other thing is that both host and iframe use postMessage to communicate and I can see the communication is working OK, it's just the content which doesn't show, but when I inspect the page source with developers tools I can see the content is there.

Is it possible that the content of the iframe causes issues? It's a basic HTML + basic JS, with JS disabled it shouldn't be an issue.

Any ideas what else I could check?

PS. I can't show the code (NDA , etc)

Solution 1

For visibility of Lukx's comment, the real answer is to set position:relative on the iframe itself, since you might not have the ability to edit the html source page or it might need to use relative positioning.

Just add this CSS and you should be all set:

iframe {
    position: relative;
}

I wrote up a full description of the problem in this answer

Solution 2

Found it.

The iframed content had the following css rule:

html{ position: relative; }

Removing it helped a lot.

Comments

[Lukx]

When one is not able to modify the iframe's inside: You can also set position:relative on the iframe tag