Safari pauses all animation on redirect / form submission

Question

I have an animation that triggers when a link is clicked. It is a jQuery animation that enlarges a div then fades out. To ensure speed, at the exact same time that the link is c

Answer 1

What I have found is that Safari actually pauses all animations as soon as the pagehide event is fired, whenever the browser begins loading a new page.

After pagehide, it won't even allow CSS changes such as showing a spinner that was previously hidden.

In order to show the spinner before the pagehide event fires, I needed to add listeners for a[href] clicks and ajaxComplete events.

My guess is that Safari does this to enhance performamce by focusing all available CPU and GPU power to the rendering of the next page.

I think this is a bit extreme, and unfortunate for UX where in many mobile web applications we use spinner animations at page unload to show the user something is happening during the few seconds while a new page is being fetched.

I have so far not found a way to preserve motion animation during page unload; at best the spinner appears frozen but still shows up... a possible workaround is to use a static message to indicate it's "Loading..."

Answer 2

Possibly use some Ajax to load the new page in a hidden frame while the animation is still going. When it finishes loading, do a normal redirect to the same URL. Then hopefully it would be an instant redirect since the new page may then be cached and its underlying query already processed.

Answer 3

Write the code for animation before form submission. Perform form submission after some time. That is:

var someData = 'foo'; //This value is irrelevant, just there for syntactical consistency.

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

//Write your code for animation at first.
$(this).animate({width: "100px", height: "100px", opacity: "0"}, 150);

//write the code for form submission
setTimeout(function() {
    var form = $("<form method='POST'></form>");
    form.attr("action", "http://someurl.com");
    var input = $("<input type='hidden'/>");
    input.val(someData);
    form.append(input);
    $(document.body).append(form);
    form.submit();
 }, 1000);

});

Answer 4

You could use a setTimeout to go to the link after the animation.

var someData = 'foo'; //This value is irrelevant, just there for syntactical consistency.

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

function doThisAfterTimeExpires(){

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

}

Answer 5

Safari complains that it can't find the variable someData, it is trying to set the value of the input to the value of a variable that does not exist and stops executing that portion of the page's JavaScript.

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

Just create the variable like this:

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

and it will work in Safari.