jQuery Toggle Slide ne fonctionne pas dans Safari

Question

J'ai une grille de maçonnerie avec quelques effets de survol. Les effets de survol fonctionnent correctement dans Chrome, mais ils ne fonctionnent pas dans Safari. Voir le code ici:

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

Lorsque vous passez la souris sur une image dans Safari est ce qui se passe:

La superposition violet ne glisse pas, ne va pas le plein largeur de son conteneur, et semble être recadrée à la fois horizontalement et verticalement. Dans Chrome, il fonctionne comme il se doit (en faisant glisser &, l'incrustation violette correspond à la largeur et à la hauteur du conteneur).

Voici le code correspondant:

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); 
    }); 
}); 

code complet ici: http://codepen.io/ameliarae/pen/MbKjWv

Answer 1

Je viens de comprendre. J'ai dû remplacer débordement: caché avec débordement: visible; à la classe .portfolio-item pour l'utiliser dans Chrome & Safari.

il ressemble maintenant:

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