物化CSS - 波浪效果模糊形式

Question

我正在探索Materialise CSS库，我遇到了wave效果类的一些问题。 当添加到按钮时，它会模糊它所处的形式。

这是没有波浪效果的形式：

添加波浪效果后会变得模糊：

我的HTML看起来像这样：

<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>

当检查从类继承的css属性时，我注意到造成模糊的原因是：will-change: opacity, transform;

删除后，文字恢复正常。

所以我的问题是，为什么会发生这种情况？
以及如何在没有副作用的情况下应用效果？

修改 我已经检查过chrome firefox和explorer，问题只发生在chrome上。