Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by benfarnham
benfarnham
17,073 Points

Custom animation transition disabling links in Safari after a few page clicks.

So I have built a custom page transition that utilizes CSS3 animations and jQuery. It works beautifully on every browser EXCEPT Safari OS X sadly :(

All in all, when you are navigating in Safari OS X, it works for about 3-5 pages then suddenly all links stop working, and sometimes, pages are cut in half. I am at a loss here!

Here is my jQuery: 

$(document).on('click','a:not([target="_blank"]):not([href^=#]):not(.ppc-thumbnail-image)', function(e){
        e.preventDefault();
        var a = $('body');
        var b = $(this).attr('href');
        var c = 250;
        a.addClass('exiting-transition');
        a.animate({opacity: 0}, c);
        setTimeout(function(){
                window.location = b;
        },c);
        return false;
});

And my CSS (but I don't feel like this would affect anything):

@-webkit-keyframes inTransition {
    0% {
    opacity: 0;
    -webkit-transform: translate3d(-1500px, 0px, 0) scale3d(1, 1, 1);
    -ms-transform: translate3d(-1500px, 0px, 0) scale3d(1, 1, 1);
    transform: translate3d(-1500px, 0px, 0) scale3d(1, 1, 1);
    }
    100% {
    opacity: 1;
    -webkit-transform: translate3d(1,1,1) scale3d(1, 1, 1);
    -ms-transform: translate3d(1,1,1) scale3d(1, 1, 1);
    transform: translate3d(1,1,1) scale3d(1, 1, 1);
    } 
}
@keyframes inTransition {
    0% {
    opacity: 0;
    -webkit-transform: translate3d(-1500px, 0px, 0) scale3d(1, 1, 1);
    -ms-transform: translate3d(-1500px, 0px, 0) scale3d(1, 1, 1);
    transform: translate3d(-1500px, 0px, 0) scale3d(1, 1, 1);
    }
    100% {
    opacity: 1;
    -webkit-transform: translate3d(1,1,1) scale3d(1, 1, 1);
    -ms-transform: translate3d(1,1,1) scale3d(1, 1, 1);
    transform: translate3d(1,1,1) scale3d(1, 1, 1);
    }
}
@-webkit-keyframes outTransition {
    0% {
    opacity: 1;
    -webkit-transform: translate3d(1,1,1) scale3d(1, 1, 1);
    -ms-transform: translate3d(1,1,1) scale3d(1, 1, 1);
    transform: translate3d(1,1,1) scale3d(1, 1, 1);
    }
    100% {
    opacity: 0;
    -webkit-transform: translate3d(1500px, 0px, 0) scale3d(1, 1, 1);
    -ms-transform: translate3d(1500px, 0px, 0) scale3d(1, 1, 1);
    transform: translate3d(1500px, 0px, 0) scale3d(1, 1, 1);
    }
}
@keyframes outTransition {
    0% {
    opacity: 1;
    -webkit-transform: translate3d(1,1,1) scale3d(1, 1, 1);
    -ms-transform: translate3d(1,1,1) scale3d(1, 1, 1);
    transform: translate3d(1,1,1) scale3d(1, 1, 1);
    }
    100% {
    opacity: 0;
    -webkit-transform: translate3d(1500px, 0px, 0) scale3d(1, 1, 1);
    -ms-transform: translate3d(1500px, 0px, 0) scale3d(1, 1, 1);
    transform: translate3d(1500px, 0px, 0) scale3d(1, 1, 1);
    }
}
body {
    -webkit-animation: inTransition 500ms normal;
    animation: inTransition 500ms normal;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-transform-origin: 50% 50% !important;
    -ms-transform-origin: 50% 50% !important;
    transform-origin: 50% 50% !important;
}
body.exiting-transition {
    -webkit-animation: outTransition 300ms normal;
    animation: outTransition 300ms normal;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-transform-origin: 50% 50% !important;
    -ms-transform-origin: 50% 50% !important;
    transform-origin: 50% 50% !important;
}

Any ideas as to why this isn't working inside of Safari for OS X? I have been researching for the last 2 days and maybe I am just asking the wrong questions but I couldn't find anything. Thank you everyone who takes the time to look and even help!

Best wishes to all of you!

1 Answer

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Are you using Safari on Mac OS X or iOS? I ask this because sometime this past week there were changes made to Safari in iOS specifically relating to how it handles links. If you are using iOS, are you using 9.3.1?

Google this: apple ios 9.3.1 safari See how many hits you get for the bugs with links in Safari :)

benfarnham
benfarnham
17,073 Points

Thanks for catching that! I am referring to Safari for OS X. I was planning on disabling the function for mobile. I am using Safari 9.1 currently.

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

I don't really know if there are currently any bugs for Safari in Mac OS X, but I wouldn't rule it out :)