angular - 元素 mat-checkbox-ripple 被切断

Question

有一个带有复选框(MatCheckbox)的列表，当用户单击复选框时，动画将被切断。

每个复选框的包装都有

display: flex;
overflow: hidden;

样式。我看到 mat-ripple-element 具有绝对位置，无法理解为什么它被切断。我创建了一个小演示here 。我希望得到任何帮助/说明如何在不添加任何填充或删除 overflow: hide; 属性的情况下修复它。

Answer 1

修复了从绝对位置到固定位置的变化:

::ng-deep mat-checkbox .mat-checkbox-inner-container .mat-checkbox-ripple {
  position: fixed;
  left: inherit;
  top: inherit;
  transform: translate(-12px, -12px);  // -<checkbox width>/2, -<checkbox height>/2
}

更新的示例 here .