jquery_ujs 问题 : Font Awesome animated spinner works in Chrome but Not Safari

Question

我正在使用 font-awesome-rails在我的 Rails 元素中。当用户点击表单上的提交按钮时:

• 在提交按钮内应该有一个动画字体超棒的微调器，按钮内的文本应该变成“正在提交...”。
• 该按钮应该被禁用，这样用户就无法多次提交表单。

以下代码在使用 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 中有效。当绑定(bind)到表单提交按钮时，它就不起作用了。我曾尝试使用 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 应该足以强制硬件加速，但这里绝对需要第二行才能工作...