1

I have a login box that opens when clicking a link.

HTML:

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

I am using a transition effect in 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%;
}

When clicking on the link, a new class is added to it to give it a height:

.logingBox.visible {
    height: 525px;
}

The problem:

It works perfectly in all browsers. However, in Edge (on the Surface tablet), the div opens but the iframe contents are not visible until I click on it.

I tried to set focus on the first field inside the iFrame (via jQuery after the visible class is added), but I am unable to access the iframe contents since it is on a different server.

TylerH
  • 20,799
  • 66
  • 75
  • 101
user6316054
  • 11
  • 4
  • have you tried to set an height for the iframe? (via attribute or css `.logingBox.visible iframe { height: 100% }`) – Fabrizio Calderan May 10 '16 at 16:02
  • Sorry, I forgot to include the iframe CSS. I just edited my question now. I already had 100% applied to the height. – user6316054 May 10 '16 at 16:26
  • The problem is that Edge assumes that since the height is 0, it doesn't need to render the content of the iframe. [Similar to setting an iframe to `display: none`](https://stackoverflow.com/a/2786429/215552). You could try refreshing the `iframe` half a second after you add the class.... – Heretic Monkey Feb 14 '19 at 17:41

0 Answers0