元素 mat-checkbox-ripple 被切断答案

【问题标题】：Element mat-checkbox-ripple is cut off元素 mat-checkbox-ripple 被切断
【发布时间】：2021-04-30 00:20:04
【问题描述】：

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

复选框的每个包装器都有

display: flex;
overflow: hidden;

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

【问题讨论】：

如果您从包装元素中删除隐藏的溢出，它不会切断涟漪效应
@Chellappanவ 这只是一个例子。在我的项目中，我有几个溢出的父元素：隐藏；属性，并且不容易删除。
如果是这种情况，您可以向复选框元素或包装器元素添加一些填充。它将解决问题
@Chellappanவ 由于 UX 要求，无法添加额外的填充。问题更多是关于如果绝对元素不在文档流中，为什么它会被截断。
当我们在父元素上设置溢出隐藏时，子元素的任何溢出都将不可见。由于在 mat-checkbox 之外发生涟漪效应，它被隐藏了

标签： angular angular-material

【解决方案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。

【讨论】：

这在页面可以滚动时不起作用。