30

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 clicked, the redirect is fired off. This has to happen and I cannot put the redirect in the success function of jQuery's animate(). This redirect is done via a form submission. On Chrome, Firefox, and IE it works as expected, the animation plays and if the page loads entirely before the finish of the animation, it redirects but the animation does play.

On Safari (primarily testing on iPad), as soon as the link is clicked, the page seemingly 'freezes' and the animation fails to execute. There are also GIF's that are on the screen at page load, and if I click a link while those GIF's are on screen and animating, they pause as well. I have seen a post that says to set a timeout, apply styling, then submit, but the problem is that although the HTML will apply that CSS style, it still freezes the screen, and they are not dealing with animation, just static CSS styling.

Here is some example code to show the method of how I am accomplishing this (it is not tested just trying to illustrate my point, so there may be missing parts or syntax errors):

var someData = 'foo'; //This value is irrelevant, just there for syntactical consistency.
$("#link").on("click", 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();
  
    //Form has been submitted, now run a short animation for the remaining life of the current page
    $(this).animate({width: "100px", height: "100px", opacity: "0"}, 150);
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="link" style="width: 100px; height: 100px; background-color: #FFF">Click Me</div>

Essentially, I need to make sure that once the Safari browser begins to load a new page / link, it does not stop updating the current page. This sounds like a problem in Safari from what I have seen, but this issue has also not been run into very commonly across the web as I have seen. There are posts dealing with GIF animations, but this is a CSS style animation.

Thanks for any help!

3
  • i am facing similar situation with safari, did you solve it ?
    – Rahul Dess
    Commented Jun 14, 2015 at 18:26
  • 1
    For reference purposes, I found the following web-kit bug while I was looking for a solution: bugs.webkit.org/show_bug.cgi?id=16177 Commented Oct 2, 2015 at 13:37
  • Sorry for the delay of anyone keeping an eye on this - I haven't found a solution yet. Matt, thanks so much for posting that. I had found that when I was initially researching this but couldn't turn it up again.
    – keevee
    Commented Oct 14, 2015 at 16:50

7 Answers 7

3

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..."

1

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();

}
3
  • 2
    This is a workaround that I considered but not a solution. The case that I was encountering was that some links take awhile to load since a long running background query needed to be completed before the page would be served. To alleviate this wait time, I would play an animation. Enforcing the animation to complete before requesting a page load would only exacerbate the issue.
    – keevee
    Commented May 21, 2018 at 15:45
  • same problem here... do you happened to find any solution? Commented Apr 14, 2021 at 8:58
  • I believe the solution I proposed above is what I ultimately went with, back when I had the issue.@BegYourPardon Commented Apr 16, 2021 at 18:36
1

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.

1
  • @sukanya-purushothaman I’ve been looking around the web for an example of how to do this with asp.net. So far I am yet to find one. Any chance you give a simple aspx example of how to do this? Thanks Commented Jan 3, 2022 at 19:53
1

I had this issue for a long time and tested many differents ways.

I noticed that you still can use css animations, this mean you can still have an nice effect while safari is loading.

But, this require that your animations is not using any delays, Animation have to start as soon as the form is submitted.

For example, I wanted to have 3 car, appearing one after the other, while the page is loading.

As I was using a delay for each car before animation start, only the first one was appearing, then the animations stop, and car2, car3 never appeared.

But, when I removed the delay of the second and third car, this work fine, even if the animation is long.

This mean :

Animation delayed for 1s : Fail, don't even appear Animation starting at 0s : Works, even if animations duration is above 5s.

So, I assume Safari is stopping all animations, except those already launched

This worked for me.

0

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.

6
  • 1
    Like I said, the code snippet is incomplete, it was just there to illustrate my point. The variable I mark with 'someData' is actually instantiated. It works in every other browser, it's just that when Safari tries to do a page load, it basically freezes any rendering. I want the animate to happen while it's still waiting for data back from the next page (so in the case that there is a slow connection, you get a better visual that the page is loading)
    – keevee
    Commented May 22, 2015 at 20:31
  • Adding var someData; to your code makes your code work in Safari. This means your code snippet does not actually reflect the real code which you have a problem with. Please edit your post and provide a code snippet which accurately reflects your true code. Commented May 22, 2015 at 21:20
  • 1
    I can't post the real code, that's confidential to the company I work at. An entire working code snippet would be extraneous and external from the point I am making. Please read my entire post and you will realize that this is deeper than simple JavaScript syntax and variable instantiation, but rather due to something in the rendering engine of Safari. Please only answer if you understand the question.
    – keevee
    Commented May 26, 2015 at 15:15
  • I am sorry I am coming off as so, but it is not a matter of code syntax. It's the usage of a form submission in the Safari browser on a Mac that causes the screen to stop updating the rendering. I was hesitant to even post a snippet because of getting a confusion like this. I will edit the code snippet if it will help you more effectively answer my question. It's hard to believe you read the entire post if you disregard everything I am trying to say.
    – keevee
    Commented May 27, 2015 at 16:23
  • I have made a screen recording available at vimeo.com/129016130 it should be ready ~30 mins after submitting this comment. There is as of now no proof that Safari actually pauses the animation since the code in your edited question works fine in Safari on both iOS and OS X (i.e. does not pause animation). Can you edit the code so it is possible to actually trigger the problem? It is possible you are correct that Safari has a CSS rendering/animation bug on form submission via JS, but no repeatable code available or evidence available yet, without that a solution can not be found obv. Commented May 27, 2015 at 17:43
0

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);

});
0

I had the same issue. Unfortunately, the solution using setTimeout() didn't work for me. With a submit delay the CSS animation starts, but freezes immediately when the page start loading.

So what I finally did, was a special animation, less dynamic, especially for safari browser:

var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
if(isSafari){ // If Safari browser
  $("span#loading_without_spinner").css("display", "block"); // This span contains the text "Loading..."
}else{ // Other browsers
  $j("span.spinner").css("display", "block"); // This span contains my css svg animation
}

I'm still interested if someone manages to force a CSS animation during a page load.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.