物化波影响在 Safari 中无法正常工作

Question

我使用 Materialize 并尝试激活 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 与 Materialize 由 long standing Safari bug 引起的

您可以使用mask-image 作为解决方法，如here 所述

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

使用 css hack 仅针对 Safari 可能很有用，因为边缘渲染的质量似乎降低了 - Safari hacks。