jquery_ujs问题：Font Awesome动画微调器适用于Chrome但不适用于Safari

Question

我在rails项目中使用font-awesome-rails。当用户单击表单上的提交按钮时：

• 在提交按钮中应该有一个动画字体 - 真棒微调器，按钮内的文本应该改为说＆＃34;正在提交...＆＃34;。
• 应禁用该按钮，以便用户无法多次提交表单。

以下代码在使用Google Chrome时效果很好：

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

在Safari中：

• 该按钮已成功停用
• 但是微调器图标显示 ，文本不更改。

我创建了一个小应用来展示这个问题。 The repo is here。在Chrome上提交blog表单，然后在Safari中提交。您会注意到动画可以在Chrome上运行，但不适用于Safari。

我看到了this issue on jquery_ujs。有一些相当冗长的工作，但没有什么方便重用我想要实现这个功能的所有地方。

这似乎是一个浏览器问题：一旦提交表单，Safari之类的东西不想做一些额外的处理，因为它不想减慢速度。

来自GoRails的Chris Oliver向我指出，如果你在控制台中运行以下命令，即使在Safari中：它会触发所需的效果：

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

因此效果在野生动物园中起作用。当它绑定到表单提交按钮时，它不起作用。我尝试使用Safari版本9.1.2以及10.0.1执行此操作。我也试过Rails 4.2.6和Rails 5.

Answer 1

可能只是一个很好的快速修复...请参阅this JSFiddle，这是问题的一个更小的最小例子。在Safari 10.1上，对我来说刷新的时间大约占70％。

然后我们通过CSS强制使用硬件加速：

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

the problem goes away。

注意：从技术上讲，CSS的第一行应该足以强制硬件加速，但是这里最需要的第二行是为了工作......