Search code examples
jquerycssopacityfade

CSS + JQuery Pages Fade Out/In - Safari Issue

I'm trying to have a nice fade out & back in when navigating across pages in a site. I have it working elegantly in almost every browser (FF, Chrome, IE10 & 11, Android & iOS). But Safari desktop (v.9.1, 10.0, & 10.1) doesn't do the fade out, and worse, when hitting back button, returned page is hidden (opacity 0). Oddly, Safari iOS does not have the back button issue (still doesn't get the fade out when leaving a page, though).

Here's how it's currently being done. Is there a more preferred method (we're close here)??

HTML:

<body>
<div id="content-wrap" class="content fade-out">Page content here.</div>
</body>

JQuery:

$(window).load(function() {
    $("#content-wrap").removeClass("fade-out");
});  

window.addEventListener("beforeunload", function () {
  $("#content-wrap").addClass("fade-out");
});

CSS:

.content {
opacity: 1;
transition: 0.8s opacity; 
}
.content.fade-out {
opacity: 0;
}
Solution

  • I was able to get things to work in Safari by adding this to the JS (based on an answer found here):

    window.addEventListener("pageshow", function() {
$("#content-wrap").removeClass("fade-out");
}, false);

    I'm not certain if this causes any potential conflict with the $(window).load(function(), but it seems to be working OK in all browsers I've tested so far.