Safari приостанавливает всю анимацию при отправке/отправке формы

У меня есть анимация, которая срабатывает при нажатии ссылки. Это анимация jQuery, которая увеличивает div, затем исчезает. Чтобы обеспечить скорость, в то же самое время, когда нажимается ссылка, перенаправление запускается. Это должно произойти, и я не могу перенести перенаправление в функцию успеха jQuery animate(). Это перенаправление осуществляется посредством отправки формы. В Chrome, Firefox и IE он работает так, как ожидалось, анимация воспроизводится, и если страница загружается целиком до окончания анимации, она перенаправляется, но анимация проигрывает.

В Safari (в первую очередь тестирование на iPad), как только нажимается ссылка, страница, казалось бы, "зависает", и анимация не выполняется. Также есть GIF, которые находятся на экране при загрузке страницы, и, если я нажму ссылку, пока эти GIF будут на экране и анимируются, они также приостанавливаются. Я видел сообщение, в котором говорится, чтобы установить тайм-аут, применить стиль, а затем отправить, но проблема в том, что, хотя HTML будет применять этот стиль CSS, он все равно зависает на экране, и они не имеют дело с анимацией, просто статический стиль CSS.

Вот примерный код, показывающий способ выполнения этого (он не тестируется, просто пытается проиллюстрировать мою точку, поэтому могут отсутствовать ошибки или синтаксические ошибки):

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>

Ответ 1

Safari жалуется, что не может найти переменную someData, она пытается установить значение ввода в значение переменной, которая не существует, и перестает выполнять эту часть страницы JavaScript.

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

Просто создайте переменную следующим образом:

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

и он будет работать в Safari.

Ответ 2

Вы можете использовать setTimeout для перехода к ссылке после анимации.

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

}