物化波浪效果在Safari中无法正常工作

Question

我使用Materialise并尝试激活waves样式：

<a class="btn-floating btn-large waves-effect waves-light red" >
     <i class="mdi-content-add"></i>
</a>

Wave效果在Chrome / Android中正常运行，但在Safari / iOS中无效。

出于某种原因，当我点击按钮时，波形以矩形分布，而不是以圆形分布。

我试图覆盖样式，但它没有意义：

.waves-ripple{
  border-radius: 50% !important;
}

这是CODEPAN。尝试在Chrome中打开，然后在Safari中打开。

任何想法如何解决？

[编辑]

现在灯光解决方案是减少波浪大小。这就是我到目前为止所做的：

.my-btn-floating .waves-ripple {
    width: 8px !important;
    height: 8px !important;
}

CODEPAN 2

[编辑2]

它也适用于Android S3 / 4，但不适用于Nexus4 / 5

Answer 1

这似乎是由known issue

引起的具有Materialise的long standing Safari bug

您可以使用mask-image作为here

所述的解决方法

a {
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

使用css hack来定位Safari可能很有用，因为边缘渲染的质量似乎会降低 - Safari hacks。