JavaScript doesn't work in Safari but does in Firefox and Chrome

Question

I have a form that I am validating with Parsley. The submit button has the following JavaScript code in order to animate via css. This works perfectly in Firefox and Chrome but in Safari (desktop and iOS) is does nothing. The form validates just fine but the animation doesn't run.

I tracked it down to the return true; statement. If I set it to return false; Safari works as it should, except that the form does not submit. If I set it to return true; it works everywhere I've tested except for Safari.

I've read a bunch of docs about how Safari works differently with jQuery and thus the JS code has to be modified in order to for it to truly be cross browser. How can I modify this to work everywhere?

 <script type="text/javascript"> $(function() { $('#login-form').parsley().on('form:submit', function() { $(".loginbutton").addClass("loginactive"); $(".loginbutton").css("background", "transparent"); setTimeout(function() { $(".loginbutton").addClass("loginsuccess"); $(".loginbutton").css("background", "none repeat scroll 0 0 #ffffff"); }, 3700); return true; }); }); </script>

Answer 1

The answer is that Safari will cease all animation on another object loading (python script, another url, etc.) and there's basically nothing you can do about it. It will only show the first frame of the css animation. So, what I did was modify the login button to look different a show logging in when the form is being submitted.