2

我使用 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;
}

编码盘 2

[编辑 2]

它也发生在 Android S3/4 上，但不在 Nexus4/5 上

4

1 回答 1

1

这似乎是由长期存在的 Safari 错误引起的 Materialise 的一个已知问题

您可以使用此处mask-image描述的解决方法

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

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

于 2015-04-05T19:35:35.857 回答