Search code examples
javascriptjqueryhtmlcssslide

jQuery Toggle Slide not working in Safari

I have a masonry grid with some hover effects. The hover effects work fine in Chrome but they don't work in Safari. See code here:

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

When you hover over an image in Safari this is what happens:

enter image description here

The purple overlay doesn't slide out, doesn't go the full width of its container, and appears to be cropped both horizontally and vertically. In Chrome it is working as it should (sliding out & the purple overlay is the full width and height of the container).

Here's the relevant code:

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

Full code here: http://codepen.io/ameliarae/pen/MbKjWv

Solution

  • I just figured it out. I had to replace overflow:hidden with overflow:visible; to the .portfolio-item class to get it to work in Chrome & Safari.

    So it looks like this now: 

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