在 Chrome 中应用 CSS 过滤器时，边框半径和溢出隐藏失败

Question

我在 Chrome 中有一个带圆角的 div，溢出设置为隐藏。

它按预期工作：子内容在角落处被切断。

但是，当应用过滤器时（在我的情况下，阴影），子内容不再被切断并且具有方角。其他过滤器也会发生这种情况，例如模糊。

示例代码：

HTML：

<div class="card">
  <div class="full">
    This div should have rounded corners too.
  </div>
</div>

CSS：

.card{
  overflow: hidden;
  border-radius: 10px;

  /* Removes hidden corners in Chrome */
  filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.3));

  background: gray;
  width: 200px;
  height: 200px;
}

.full{
  background: black;
  color: white;
  width: 100%;
  height: 100%;
}

JS小提琴：https : //jsfiddle.net/uc1v5nzk/

应用过滤器时，Firefox 会正确呈现元素。

在 Chrome 上是否有任何优雅的解决方案，尤其是当可能有许多子元素可能在角落里或可能不在角落时？

Chrome 版本：版本 66.0.3359.117（官方版本）（64 位）

操作系统：Ubuntu 16.04 64 位

Answer 1

在包装器上添加绝对定位的::before元素似乎可以修复该错误。

.card::before{
  content: '';
  position: absolute;
}

小提琴：https://jsfiddle.net/swordys/uc1v5nzk/2/