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

我有一个带有悬浮效果的砖石网格。悬停效果在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

最佳答案

我只是想通了。我必须将overflow：hidden替换为overflow：visible;到.portfolio-item类，以使其可以在Chrome＆Safari中使用。

所以现在看起来像这样：

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