元素 mat-checkbox-ripple 被切断

Question

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

每个复选框的包装都有

display: flex;
overflow: hidden;

风格。我看到 mat-ripple-element 具有绝对位置，无法理解为什么它被切断。我在这里创建了一个小演示。我将不胜感激任何帮助/说明如何在不添加任何填充或删除溢出的情况下修复它：隐藏；财产。

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
}

此处更新了示例。