Html Ripple effect在Mac浏览器上不起作用

我使用了一个引导库的连锁反应，但是我遇到了一个以前从未见过的奇怪问题。我在Chrome（Mac）上的效果很好。但是，在safari和Firefox（59.0.1，Mac）上，效果不起作用

奇怪的是，这种效果适用于FireFox for windows、IE和Chrome for windows

我不确定哪里出了问题，因为它具有这些浏览器的所有web工具包属性

试试看：

*{框大小：边框框；}
钮扣{
边界：无；
光标：指针；
颜色：黑色；
宽度：130px；
填充：10px；
边界半径：2px；
字号：19px；
背景：皇家蓝；
位置：相对位置；
溢出：隐藏；
}
按钮：之后{
内容：''；
位置：绝对位置；
最高：50%；
左：50%；
宽度：5px；
高度：5px；
背景：rgba（255,255,255,5）；
不透明度：0；
边界半径：100%；
-webkit转换：比例（1,1）转换（-50%）；
-moz变换：缩放（1，1）平移（-50%）；
-ms转换：比例（1，1）转换（-50%）；
-o变换：比例（1，1）平移（-50%）；
转换：比例（1，1）转换（-50%）；
-webkit转换来源：50%50%；
-moz变换原点：50%50%；
-ms转换来源：50%50%；
-o-变换原点：50%50%；
变换原点：50%50%；
}
@关键帧波纹{
0% {
-webkit变换：缩放（0,0）；
-moz变换：缩放（0,0）；
-ms变换：比例（0,0）；
-o变换：比例（0,0）；
变换：缩放（0,0）；
不透明度：1；
}
20% {
-webkit变换：比例（25,25）；
-moz变换：比例（25,25）；
-ms变换：标度（25,25）；
-o变换：标度（25,25）；
变换：比例（25,25）；
不透明度：1；
}
100% {
不透明度：0；
-webkit变换：比例（40,40）；
-moz变换：比例（40,40）；
-ms变换：标度（40,40）；
-o变换：标度（40,40）；
变换：比例（40,40）；
}
}
按钮：焦点：不（：活动）：：之后{
-webkit动画：ripple 1s放松；
-moz动画：ripple 1s放松；
-o型动画：ripple 1s放松；
动画：ripple 1s放松；
}
按钮：焦点{
大纲：无；
}
如果您使用的是FireFox或Safari（Mac版本），这种连锁反应对您不起作用。它适用于PC浏览器和Chrome for Mac

涟漪

我认为问题在于，在Safari和Firefox的OS X中单击按钮不会导致按钮聚焦，因此不会触发动画：

在Safari中，我测试了您的代码，添加了这一点jQuery，以强制在按钮单击时处于聚焦状态，这对我来说很有效：

$('button').on('click', function() {
  $(this).focus();
});

或者，如果用锚定标记替换按钮，看起来您可以在Firefox（至少在59.0.1上）和OSX上的Safari（10.1）中实现这一点，但您必须确保设置tabindex

---

哇，我印象深刻！非常感谢，不客气。我从来没有考虑过这个CSS波浪/涟漪效应，所以也谢谢你。我找不到任何CSS规范的涟漪效应。它在哪里？

$('button').on('click', function() {
  $(this).focus();
});