I am using font-awesome-rails in my rails project. When the user clicks the submit button on a form:
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:
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.
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);
}
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...