jQuery切换幻灯片不能在Safari中工作

我有一个砖石网格，有一些悬停效果。 Chrome中的悬停效果效果很好，但在Safari中无法使用。见代码在这里：jQuery切换幻灯片不能在Safari中工作

当你将鼠标悬停在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

来源

2016-11-10 Mia

嗨，不知道这是否可以帮助你，但是，当你让他们出现2列调整窗口的大小，它的工作好上safary，这样可以给你一个线索 – Slico

我只是想通了。我不得不更换溢出：隐藏与溢出：可见;添加到.portfolio-item类，以使其在Chrome & Safari中运行。

所以它看起来像现在这样：有

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

来源

2016-11-10 18:05:02 Mia

jQuery切换幻灯片不能在Safari中工作

回答

相关问题