Question

0

239

Views

jquery_ujs issue: Font Awesome animated spinner works in Chrome but Not Safari

I am using font-awesome-rails in my rails project. When the user clicks the submit button on a form:

within the submit button there should be an animated font-awesome spinner, and the text within the button should change to saying "Submitting...".
the button should be disabled so that the user is unable to submit the form multiple times.

The following code works perfectly when using Google Chrome:

<%= f.button "Submit", class: "btn btn-success", data: {disable_with: "<i class='fa fa-spinner fa-spin'></i> Submitting..."} %>

In Safari however:

the button is successfully disabled
But the spinner icon does not appear, and the text does not change.

I created a tiny app to show the issue. The repo is here. Submit the blog form on Chrome and then submit it in Safari. You will notice that the animation works on Chrome but not safari.

I saw this issue on jquery_ujs. There are some quite verbose work arounds, but nothing that is convenient for re-use for all the places I want to implement this functionality.

It appears to be a browser issue: something like Safari doesn't want to do some additional processing once a form is submitted because it doesn't want to slow things down.

Chris Oliver from GoRails pointed out to me that if you run the following in the console, even in Safari: it triggers the desired effect:

$.rails.disableFormElement($("button"))

So the effect works in safari. It just doesn't work when that is bound to a form submission button. I have attempted doing this with Safari version 9.1.2, as well as 10.0.1. I have also attempted in Rails 4.2.6 and Rails 5.

6 months ago · Santiago Trujillo

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-13T21:05:41.464Z

There might just be a nice quick-fix... See this JSFiddle, which is an even smaller minimal example of the problem. On Safari 10.1, the refresh is broken about 70% of the time for me.

Then we force hardware acceleration to be used, through CSS:

form {
  -webkit-transform: translate3d(0,0,0);
  transform: translateZ(0); 
}

And the problem goes away.

Note: technically the first line of CSS should be enough to force hardware acceleration, but the second line most definitely is needed here for this to work...