[英]jquery_ujs issue: Font Awesome animated spinner works in Chrome but Not Safari
I am using font-awesome-rails in my rails project. 我在rails项目中使用了font-awesome-rails 。 When the user clicks the submit button on a form: 当用户单击表单上的提交按钮时:
The following code works perfectly when using Google Chrome: 以下代码在使用Google Chrome时效果很好:
<%= f.button "Submit", class: "btn btn-success", data: {disable_with: "<i class='fa fa-spinner fa-spin'></i> Submitting..."} %>
In Safari however: 但在Safari中:
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. 在Chrome上提交blog
表单,然后在Safari中提交。 You will notice that the animation works on Chrome but not safari. 您会注意到动画适用于Chrome但不适用于Safari。
I saw this issue on jquery_ujs . 我在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. 它似乎是一个浏览器问题:一旦提交表单,Safari之类的东西不想做一些额外的处理,因为它不想减慢速度。
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: 来自GoRails的Chris Oliver向我指出,如果你在控制台中运行以下命令,即使在Safari中:它会触发所需的效果:
$.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. 我尝试使用Safari版本9.1.2以及10.0.1执行此操作。 I have also attempted in Rails 4.2.6 and Rails 5. 我也尝试过Rails 4.2.6和Rails 5。
There might just be a nice quick-fix... See this JSFiddle , which is an even smaller minimal example of the problem. 可能只是一个很好的快速修复...看到这个JSFiddle ,这是一个更小的问题的最小例子。 On Safari 10.1, the refresh is broken about 70% of the time for me. 在Safari 10.1上,对我来说刷新大约有70%的时间。
Then we force hardware acceleration to be used, through CSS: 然后我们通过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... 注意:从技术上讲,CSS的第一行应该足以强制硬件加速,但是这里需要第二行才能使用它...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.