javascript - jQuery Toggle Slide 在 Safari 中不起作用

Question

我有一个带有悬停效果的砌体网格。悬停效果在 Chrome 中运行良好，但在 Safari 中不起作用。在这里查看代码:

http://codepen.io/ameliarae/pen/MbKjWv

当您在 Safari 中将鼠标悬停在图像上时，会发生以下情况:

紫色叠加层没有滑出，没有达到其容器的整个宽度，并且看起来在水平和垂直方向上都被裁剪了。在 Chrome 中，它正常工作(滑出并且紫色覆盖层是容器的整个宽度和高度)。

相关代码如下:

HTML:

<article>
  <section class="portfolio-item">
    <div class="overlay">
    <div class="text-bloq">
    <p>How Truthful are Food Labels? Interactive Quiz</p><br>
    <span class="type">Design &amp; Dev</span>
    </div>
    </div>
    </section>
</article>

SCSS:

 article {
     -moz-column-width: 16em;
     -webkit-column-width: 16em;
     -moz-column-gap: 1em;
     -webkit-column-gap: 1em; 
     section {
         display: inline-block;
         margin:  0.25rem;
         padding:  1rem;
         width:  100%; 
         background:  $purple;

     }

 }
 .overlay{
    position:absolute;
    width: 100%;
    display: block;
    top:0;
    left: 0;
    text-align: left;
    font-size: 1.55em;
    font-family: $light;
    color: $white;
    opacity: 0.8;
    height: 100%;
    background: $purple;
    .text-bloq{
        display: block;
        position: absolute;
        margin: 50% auto;
        left: 0;
        right: 0;
        padding:1em;
        .description{
            font-family: $light;
            font-size: 0.75em;
        }
        .type{
            font-family: $light;
            font-size: 0.75em;
            padding: 0.5em 0.65em;
            border: 2px solid $white;
            margin-top: 1em;
        }
    }
}
.portfolio-item{
    position:relative;
    overflow:hidden;
    background-size:cover;
    background-position:100%;
    &:hover{
        cursor: pointer;
    }
}
.portfolio-item:nth-child(1){
    background-image:url('http://placehold.it/600x600');
    min-height: 600px;
    &:hover{
       @include animation('animatedBackgroundWork 10s linear infinite');
   }
}

jQuery:

$(document).ready(function(){
$(".portfolio-item").hover(function(){
     $(this).find(".overlay").toggle("slide", { direction: "right" }, 1000);
     });
});

完整代码在这里:http://codepen.io/ameliarae/pen/MbKjWv

Answer 1

我刚刚弄明白了。我必须将 .portfolio-item 类的 overflow:hidden 替换为 overflow:visible; 以使其在 Chrome 和 Safari 中工作。

所以现在看起来像这样:

.portfolio-item{
     position:relative;
     overflow:visible;
     background-size:cover;
     background-position:100%;
&:hover{
    cursor: pointer;
}
}