Materialize CSS - waves-effect blurs form - css

Question

I'm exploring the Materialize CSS library, and I'm having some issues with the waves effect class.
When added to a button it blurs the form it is in.
This is the form without the waves-effect:
After adding the waves-effect it gets blurry:
My html looks like this:
<div class="login-form centered">
<h1><i class="fa fa-user menu-icon"></i> Login</h1>
<form role="form">
<div class="form-group">
<input type="text"
class="form-control"
ng-model="alc.user.username"
id="username"
placeholder="Username"/>
</div>
<div class="form-group">
<input type="password"
class="form-control"
id="password"
ng-model="alc.user.password"
placeholder="Password"/>
</div>
<button type="submit"
class="waves-effect btn"
ng-click="alc.login(alc.user.username)">Sign in
</button>
<button type="submit"
class="waves-effect btn"
ng-click="alc.register()">Register
</button>
</form>
</div>
When checking the css attributes inherited from the class, I noticed that what's causing the blur is: will-change: opacity, transform;
After removing it the text returned to normal.
So my question is, why is this happening?
and how to apply the effect without the side effect?
Edit:
I've checked in chrome firefox and explorer, and the issue only occurs on chrome.