Magnific Popup 位置错误

Question

当你有一个 link 触发 Magnific Popup 并且 link 包含在一个 absolute 定位元素中时，会发生一个奇怪的错误，这位于 relative 定位元素内 overflow:hidden.

要重现错误，请在 Chrome 或 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

为了停止这种行为只需添加这个 CSS:

.image-popup {
   display:none;
}

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

Magnific Popup 位置错误

Magnific Popup position bug

firefox

position

google-chrome

magnific-popup