Mark Thomas Miller

Page load animation not triggering on Safari Back

Sometimes, I use a fade in/fade out animation when pages are loaded or exited on my websites. I noticed that on Safari (both iOS and OSX), the page would stay blank if the Back button was pressed. Basically, pressing Back didn’t trigger jQuery’s .ready event. To make the page fade in, I’d need to hit the reload button, which was a fairly annoying consequence of trying to use some nice animations.

This was caused by something that some people call a feature and others call a bug. Safari, in its infinite wisdom, doesn’t call the .ready event when a page is loaded because it wants to serve the page from the cache.

To fix the issue, you can tell Safari to reload the page instead of trying to work its fancy magic by placing this JavaScript on your site:

// Reload page instead of serving from cache
window.onpageshow = function(event) {
    if (event.persisted) {
        window.location.reload();
    }
};

This method uses JavaScript’s event.persisted function, a happy little thing that

[…] returns a Boolean value that indicates if the webpage is loaded directly from the server, or if the page is cached, when an onpageshow or onpagehide event occurs.