Estoy usando font-awesome-rails en mi proyecto de rieles. Cuando el usuario hace clic en el botón Enviar en un formulario:
El siguiente código funciona perfectamente cuando se usa Google Chrome:
<%= f.button "Submit", class: "btn btn-success", data: {disable_with: "<i class='fa fa-spinner fa-spin'></i> Submitting..."} %>En Safari sin embargo:
Creé una pequeña aplicación para mostrar el problema. El repositorio está aquí . Envíe el formulario del blog en Chrome y luego envíelo en Safari. Notarás que la animación funciona en Chrome pero no en Safari.
Vi este problema en jquery_ujs . Hay algunas soluciones alternativas bastante detalladas, pero nada que sea conveniente para su reutilización en todos los lugares en los que quiero implementar esta funcionalidad.
Parece ser un problema del navegador: algo como Safari no quiere hacer ningún procesamiento adicional una vez que se envía un formulario porque no quiere ralentizar las cosas.
Chris Oliver de GoRails me señaló que si ejecuta lo siguiente en la consola, incluso en Safari: desencadena el efecto deseado:
$.rails.disableFormElement($("button"))Entonces el efecto funciona en safari. Simplemente no funciona cuando está vinculado a un botón de envío de formulario. He intentado hacer esto con la versión 9.1.2 de Safari, así como con la 10.0.1. También lo he intentado en Rails 4.2.6 y Rails 5.
Puede que haya una buena solución rápida... Vea este JSFiddle , que es un ejemplo mínimo aún más pequeño del problema. En Safari 10.1, la actualización se interrumpe aproximadamente el 70% del tiempo para mí.
Luego forzamos el uso de aceleración por hardware, a través de CSS:
form { -webkit-transform: translate3d(0,0,0); transform: translateZ(0); }Nota: técnicamente, la primera línea de CSS debería ser suficiente para forzar la aceleración del hardware, pero definitivamente se necesita la segunda línea aquí para que esto funcione...