为什么我在Edge中的iframe中有空内容？

Question

点击链接时会打开一个登录框。

HTML：

<div class="loginBox">
    <iframe src="pathToExternalSite" id="loginIFrame"></iframe>         
</div>

我在CSS中使用过渡效果：

.logingBox {
    z-index: 9999;
    width: 300px;
    right: calc((100% - 1190px) / 2 + 72px);
    height: 0px;
    position: fixed;
    overflow: hidden;
    background: #dbdbdb;
    transition: height 0.4s ease-in-out;
}

.loginIFrame {
    border: 0 none;
    height: 100%;
    overflow: hidden;
    width: 100%;
}

点击链接时，会为其添加一个新类，以使其具有高度：

.logingBox.visible {
    height: 525px;
}

问题：

它适用于所有浏览器。但是，在Edge（Surface平板电脑）上，div会打开但iframe内容在我点击之前不可见。

我尝试将焦点设置在iFrame中的第一个字段（在添加可见类之后通过jQuery），但我无法访问iframe内容，因为它位于不同的服务器上。