2

I use Materialise and a try to activate waves style:

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

Wave effect works properly in Chrome/Android but not in Safari/iOS.

For some reason when I click button, the wave distributes in rectangle and not in circle.

I tried to override style but it doesn't make sense:

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

Here is CODEPAN. Try to open in Chrome and after in Safari.

Any ideas how to fix it?

[Edit]

For now light workaround is to reduce wave size. This is what I did so far:

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

CODEPAN 2

[EDIT 2]

It also happens on Android S3/4 but not on Nexus4/5

snaggs
  • 5,543
  • 17
  • 64
  • 127
  • 1
    you can check its default issue on plugin page http://materializecss.com/waves.html – Nishit Maheta Apr 03 '15 at 12:17
  • 1
    There is an issue posted on github related to this https://github.com/Dogfalo/materialize/issues/1019 – Turnip Apr 03 '15 at 12:31
  • 1
    You could use a `mask-image` as suggested [HERE](http://stackoverflow.com/questions/5736503/how-to-make-css3-rounded-corners-hide-overflow-in-chrome-opera/10296258#10296258) but you will loose the ability to use box shadows in Safari and the rendering of edges is a little rough - [example](http://codepen.io/anon/pen/OPGdqg) – Turnip Apr 03 '15 at 12:51
  • @uʍopǝpısdn please post your example as answer to let me vote up and accept because this way just works. Thanks a lot – snaggs Apr 05 '15 at 09:48

1 Answers1

1

This seems to be a known issue with Materialize caused by a long standing Safari bug

You could use mask-image as a workaround as described here

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

It may be useful to use a css hack to target only Safari as the quality of edge rendering seems to be reduced - Safari hacks.

Community
  • 1
  • 1
Turnip
  • 35,836
  • 15
  • 89
  • 111