Jquery 具有涟漪按钮效果的浏览器问题

//改编自http://thecodeplayer.com/walkthrough/ripple-click-effect-google-material-design
$（文档）.ready（函数（）{
变量墨水，d，x，y；
$（“.ripple dark”）.mousedown（函数（e）{
if（$（this）.find（“.circle dark”）.length==0）{
$（此）。前缀（“”）；
}
墨水=$（这个）。查找（“.circle dark”）；
ink.removeClass（“动画黑暗”）；
如果（！ink.height（）&&！ink.width（））{
d=Math.max（$（this.outerWidth（），$（this.outerHeight（））；
ink.css({
身高：d，
宽度：d
});
}
x=e.pageX-$（this.offset（）.left-ink.width（）/2；
y=e.pageY-$（this.offset（）.top-ink.height（）/2；
ink.css({
顶部：y+‘px’，
左：x+‘px’
}).addClass（“动画黑暗”）；
});
});
$（文档）.ready（函数（）{
变量墨水，d，x，y；
$（“.ripple light”）.mousedown（函数（e）{
if（$（this）.find（“.circle light”）.length==0）{
$（此）。前缀（“”）；
}
墨水=$（此）.find（“.circle light”）；
ink.removeClass（“动画灯光”）；
如果（！ink.height（）&&！ink.width（））{
d=Math.max（$（this.outerWidth（），$（this.outerHeight（））；
ink.css({
身高：d，
宽度：d
});
}
x=e.pageX-$（this.offset（）.left-ink.width（）/2；
y=e.pageY-$（this.offset（）.top-ink.height（）/2；
ink.css({
顶部：y+‘px’，
左：x+‘px’
}).addClass（“设置灯光动画”）；
});
});
。按钮{
背景：灰色；
填充：50px；
颜色：白色；
文字装饰：无；
}
.ripple dark，
.波纹灯{
显示：内联块；
用户选择：无；
位置：相对位置；
溢出：隐藏；
z指数：0；
光标：指针；
边缘底部：-5px；
}
.黑圈{
显示：块；
位置：绝对位置；
背景：rgba（0,0,0,0.1）；
边界半径：100%；
变换：比例（0）；
}
.给黑暗设置动画{
动画：波纹0.45秒线性；
}
@关键帧波纹{
80% {
不透明度：0.9；
变换：尺度（3）；
}
100% {
不透明度：0；
变换：尺度（4）；
}
}
.环形灯{
显示：块；
位置：绝对位置；
背景：rgba（255，255，255，0.25）；
边界半径：100%；
变换：比例（0）；
}
.设置灯光动画{
动画：波纹0.5s线性；
}

我不想这么说，但是，它在我的机器上工作-FF 54.0.1。Ripple在Edge中不工作，但链接可以。（ripple在FF中有效，但链接无效。）（Win10。）@wazz谢谢你让我知道！我在运行MacOS 10.13。有没有关于如何解决这个问题的建议？？我的Firefox版本是56.0.2，我已经尝试了一些方法，但是没有成功。前缀似乎没有任何作用。我不想说，但是，它在我的机器上工作-FF 54.0.1。Ripple在Edge中不起作用，但链接起作用。（ripple在FF中有效，但链接无效。）（Win10。）@wazz谢谢你让我知道！我在运行MacOS 10.13。有没有关于如何解决这个问题的建议？？我的Firefox版本是56.0.2，我已经尝试了一些方法，但是没有成功。前缀似乎没有任何作用。