Magnific Popup position bug

Question

There is a strange bug happening when you have got a link triggering Magnific Popup and that link is contained inside an absolute positioned element, which is positioned inside a relative positioned element with overflow:hidden.

To reproduce the bug, checkout this example in Chrome or Firefox:

http://codepen.io/mediadivisiongmbh/pen/bdRjKy

HTML

<div class="hover-container">
  <div class="hover-image"></div>
  <div class="hover-content">
    <a class="image-popup" href="#">Evil Link</a>
  </div>
</div>

CSS

.hover-container {
    position:relative;
    overflow:hidden;

    /* Optional */
    width:50%;
    background-color:gray;
}

.hover-image {
    height:300px;

    /* Optional */
    width:80%;
    background-color:pink;
    margin-left:10%;
}

.hover-content {
    position:absolute;
    top:100%;

    /* Optional */
    height:100%;
    width:100%;
    text-align:center;
    transition:top 0.5s;
}

.hover-container:hover .hover-content {
    top:0;
}

JS

$('.image-popup').magnificPopup();

Answer 1

In order to stop this behaviour just add this CSS:

.image-popup {
   display:none;
}

.hover-container:hover .image-popup {
   display:inline-block;
}