javascript - Safari detiene toda la animación en la redirección / envío de formularios


1 Answers

Safari se queja de que no puede encontrar la variable someData , está tratando de establecer el valor de la entrada en el valor de una variable que no existe y deja de ejecutar esa parte del JavaScript de la página.

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

Solo crea la variable como esta:

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

y funcionará en safari.

javascript jquery css animation safari

Tengo una animación que se activa cuando se hace clic en un enlace. Es una animación de jQuery que amplía un div y luego se desvanece. Para garantizar la velocidad, al mismo tiempo que se hace clic en el enlace, se desactiva la redirección. Esto tiene que suceder y no puedo poner la redirección en la función de éxito de jQuery animate (). Esta redirección se realiza a través de un formulario de presentación. En Chrome, Firefox e IE funciona como se esperaba, la animación se reproduce y si la página se carga por completo antes del final de la animación, se redirige pero la animación sí se reproduce.

En Safari (principalmente pruebas en iPad), tan pronto como se hace clic en el enlace, la página aparentemente se "congela" y la animación no se ejecuta. También hay GIF que están en la pantalla cuando se carga la página, y si hago clic en un enlace mientras esos GIF están en la pantalla y animan, también se detienen. He visto una publicación que dice: establecer un tiempo de espera, aplicar un estilo y luego enviar, pero el problema es que aunque el HTML aplicará ese estilo CSS, todavía congela la pantalla y no se trata de animaciones, solo de estilos CSS estáticos. .

Aquí hay un código de ejemplo para mostrar el método de cómo lo estoy logrando (no se ha probado solo para ilustrar mi punto, por lo que es posible que falten partes o errores de sintaxis):

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>

Esencialmente, debo asegurarme de que una vez que el navegador Safari comience a cargar una nueva página / enlace, no deje de actualizar la página actual. Esto suena como un problema en Safari por lo que he visto, pero este problema tampoco se ha encontrado con mucha frecuencia en la web, como he visto. Hay publicaciones que tratan sobre animaciones GIF, pero esta es una animación de estilo CSS.

¡Gracias por cualquier ayuda!



Related