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 the form:
- the "Submit" button should have an awesome spinner animated font, and the text inside the button should change to "Submit ...".
- the button must be disabled so that the user cannot submit the form multiple times.
The following code works fine 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:
- button disabled successfully.
- But the spinner icon is not displayed and the text does not change.
I created a tiny app to show the problem. The repo is here . Submit the form blog
in Chrome and then submit it in Safari. You will notice that the animation works on Chrome, but not on safari.
I've seen this issue on jquery_ujs . There is some pretty verbose, but nothing that is reusable in all the places where I want to implement this functionality.
It seems to be a browser issue: something like Safari doesn't want to do any additional processing after the form is submitted because it doesn't want to slow down.
Chris Oliver from GoRails pointed out to me that if you run the console on the console, even in Safari: it produces the desired effect:
$.rails.disableFormElement($("button"))
Thus, the effect works in safari. It just doesn't work when it's associated with a form submit button. I tried to do this with Safari version 9.1.2 as well as 10.0.1. I have also tried in Rails 4.2.6 and Rails 5.
source to share
There might just be a quick fix ... See this JSFiddle for an even smaller minimal example of the problem. In Safari 10.1, the update breaks about 70% of the time for me.
Then we force hardware acceleration with 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 sufficient to force hardware acceleration, but a specific second line is required for this to work ...
source to share