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

Question

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

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

波浪效果在 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 with Materialize caused by a long standing Safari bug

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

所述

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

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

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

Materialise wave affect doesn't work properly in Safari

html

jquery

materialize