One interesting discovery I made is that Safari halts all animations as soon as the pagehide event triggers while loading a new page.

Even CSS changes like revealing a hidden spinner are disabled after the pagehide event.

To display the spinner before the pagehide event occurs, I had to set up listeners for a[href] clicks and ajaxComplete events.

It seems like Safari does this to optimize performance by allocating all CPU and GPU resources towards rendering the upcoming page.

This approach feels a bit extreme and it's unfortunate for user experience as many mobile web apps use spinner animations during page transitions to indicate activity while loading a new page.

Thus far, I haven't found a way to maintain motion animation during page unloading; at most, the spinner appears static but still visible... one workaround could be using a static message like "Loading..." to convey progress.

If you want to delay going to the link until after an animation, consider using a setTimeout function.

var data = 'bar'; //This variable doesn't affect the code functionality.

$("#link").on("click", function() {
    setTimeout(doTaskAfterDelay, 2000);
    $(this).animate({width: "100px", height: "100px", opacity: "0"}, 150);
});

function doTaskAfterDelay(){

    var form = $("<form method='POST'></form>");
    form.attr("action", "http://someurl.com");
    var input = $("<input type='hidden'/>");
    input.val(data);
    form.append(input);
    $(document.body).append(form);
    form.submit();

}

One potential solution is to incorporate Ajax functionality to load the next page within a concealed frame while the animation remains active. Once the loading process is complete, execute a standard redirect to the identical URL. This approach could result in an instantaneous redirect as the subsequent page might have been cached and its underlying query already resolved.

After facing a persistent issue for an extended period of time, I experimented with various approaches to find a solution.

I discovered that despite the limitations in Safari, it is still possible to utilize CSS animations to add a visually appealing effect while the browser is loading.

However, it is crucial to ensure that your animations do not include any delays and start immediately after the form submission.

For instance, I wanted three cars to appear sequentially as the page loaded. Initially, I included a delay for each car before their animation started, which resulted in only the first car appearing while the rest failed to show up.

Upon removing the delays for the second and third cars, the animations worked seamlessly, even if they were relatively long.

To summarize:

Animation with a delay of 1s: Failed to appear at all Animation starting instantly: Successful execution, regardless of duration exceeding 5s

Therefore, it appears Safari halts all animations except those that have already begun.

This approach proved effective in resolving my issue.

If Safari encounters an issue where it cannot locate the variable someData, this means that it is attempting to assign a value to an input based on a non-existent variable, causing the JavaScript execution to halt at that point.

[Error] ReferenceError: Can't find variable: someData

To resolve this problem in Safari, simply initialize the variable like so:

// [snip]
var input = $("<input type='hidden'/>");
var someData;
input.val(someData);
// [snip]

Once you have defined the variable, the code should function correctly in Safari.

To create an animation before submitting a form, follow these steps:

var data = 'bar'; //This is just placeholder data.

$("#link").on("click", function(e) {

//Implement animation code initially.
$(this).animate({width: "100px", height: "100px", opacity: "0"}, 150);

//Submit the form after a delay
setTimeout(function() {
    var form = $("<form method='POST'></form>");
    form.attr("action", "http://someurl.com");
    var input = $("<input type='hidden'/>");
    input.val(data);
    form.append(input);
    $(document.body).append(form);
    form.submit();
 }, 1000);

});

Dealing with a similar issue, I attempted the solution involving the use of setTimeout(), but unfortunately, it did not resolve the problem for me. Even with a submit delay, the CSS animation would start and then immediately freeze as soon as the page began loading.

After experimenting further, I decided to implement a different approach by creating a specialized animation that is less dynamic, specifically tailored for the Safari browser:

var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
if(isSafari){ // In cases of Safari browser
  $("span#loading_without_spinner").css("display", "block"); // Displaying text "Loading..."
}else{ // For other web browsers
  $j("span.spinner").css("display", "block"); // Showing my css svg animation within this span
}

I'm still curious if anyone has found a way to enforce a CSS animation to run smoothly during a page load process.