Safari sospende tutte le animazioni sul reindirizzamento/invio modulo

Question

Ho un'animazione che si attiva quando si fa clic su un collegamento. È un'animazione jQuery che ingrandisce un div e poi si spegne. Per garantire la velocità, allo stesso tempo in cui si fa clic sul collegamento, il reindirizzamento viene disattivato. Questo deve accadere e non posso inserire il reindirizzamento nella funzione di successo di animate() di jQuery. Questo reindirizzamento viene eseguito tramite una richiesta di modulo. Su Chrome, Firefox e IE funziona come previsto, l'animazione viene riprodotta e se la pagina viene caricata completamente prima della fine dell'animazione, viene reindirizzato, ma l'animazione non viene riprodotta.

Su Safari (principalmente su iPad), non appena si fa clic sul collegamento, la pagina si "congela" e l'animazione non viene eseguita. Ci sono anche GIF che sono sullo schermo al caricamento della pagina, e se faccio clic su un collegamento mentre quelle GIF sono sullo schermo e animano, si fermano pure. Ho visto un post che dice di impostare un timeout, applicare lo styling, quindi inviare, ma il problema è che sebbene l'HTML applichi lo stile CSS, blocca ancora lo schermo e non si occupa dell'animazione, ma solo dello stile CSS statico .

Ecco alcuni esempi di codice per dimostrare il metodo di come sto realizzazione di questo (non viene testato solo cercando di illustrare il mio punto, quindi ci possono essere parti mancanti o errori di sintassi):

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>

In sostanza, devo assicurarmi che una volta che il browser Safari inizia a caricare una nuova pagina/collegamento, non smette di aggiornare la pagina corrente. Questo suona come un problema in Safari da quello che ho visto, ma questo problema non è stato eseguito molto comunemente in tutto il web come ho visto. Ci sono post relativi alle animazioni GIF, ma questa è un'animazione in stile CSS.

Grazie per qualsiasi aiuto!

Answer 1

Safari si lamenta che non riesce a trovare la variabile someData, sta tentando di impostare il valore dell'ingresso sul valore di una variabile che non esiste e interrompe l'esecuzione di quella parte del codice JavaScript della pagina.

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

Basta creare la variabile in questo modo:

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

e funzionerà in Safari.

Answer 2

È possibile utilizzare un setTimeout per andare al collegamento dopo l'animazione.

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

}