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

Question

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

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

以下代码在使用谷歌浏览器时完美运行：

<%= 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 中有效。当它绑定到表单提交按钮时，它只是不起作用。我曾尝试使用 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 的第一行应该足以强制硬件加速，但这里绝对需要第二行才能使其工作...