具体化CSS-波浪效果模糊形式

我正在探索MaterializeCSS库，我对waves effect类有一些问题。 当添加到按钮时，它会模糊其所在的窗体

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

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

我的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属性时，我注意到造成模糊的原因是：

将改变：不透明度，变换

删除后，文本恢复正常

所以我的问题是，为什么会发生这种情况

如何在没有副作用的情况下应用效果

编辑：
我已经检查了chrome firefox和explorer，问题只出现在chrome上。
您测试了哪些浏览器？chrome。现在你提到了，我也在firefox&explorer中查看了它，这个问题只出现在chrome中。我会编辑这篇文章，并提到这个细节。除了Materialize，你还使用其他框架吗？我制作了一个小提琴，它可以在Chrome和Firefox上正确渲染和工作（我在Mac上，所以目前无法验证IE）。我正在使用：Bootstrap、Font-awsome和Animates.css。我排除了所有人，以检查原因是否是其中一人的绞痛，但模糊仍然存在。好的，我找到了罪犯。我在表单上有以下css:transform:translate（-50%，-50%）；我用它把表格居中。。显然，它不能很好地处理waves effect类的属性。