Unable to interact with iframe in Chrome or IE - cross domain JS error?

Question

I am attempting to make my website use TLS / https. This problem occurs only on the https version and not the older http version of the website. I have a link on my website which when clicked reveals an iframe on top of the rest of the website content. The link looks like this:

<a href="#">Speed Check</a>

It reveals this div (slightly modified to remove my actual URL)

<div id="speedtestmodal" class="reveal-modal tiny open" data-reveal="" role="dialog" style="display: block; opacity: 1; visibility: visible; top: 1130px;" area-hidden="true">
    <iframe width="620" height="420" style="visibility:;" id="example" src="https://page.domain.com" scrolling="no" frameborder="0"></iframe>
</div>

This works and the iframe and expected content is visible, the problem I have is that the page in the iframe contains a text box which the user should fill in. This behaves as expected in Firefox but in Chrome or IE attempting to click into the text box closes the entire Iframe.

The website is beta.domain.com and the iframe is page.domain.com so I thought the problem may be related to cross domain JS calls, to try and get around this I added the following to the head on both websites (as described at http://madskristensen.net/post/iframe-cross-domain-javascript-calls ):

<script type="text/javascript">
document.domain ='domain.com';
</script>

But it has made no difference. Is there something that I'm missing here? Is there any more information that I can provide to help debug this?

Answer 1

It turned out the problem was CSS related and it was only working in firefox due to a bug in the browser.

The Z-index value of the modal was causing it to be hidden behind another semi-transparent modal which is part of a separate function of the website.