在Chrome中应用CSS过滤器时，边框半径和溢出隐藏失败 [英] Border radius and overflow hidden fail when CSS filter is applied in Chrome

问题描述

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

I have a div with rounded corners in Chrome with overflow set as hidden.

它按预期工作:子内容在角落处被切除.

It works as expected: the child content is cut off at the corners.

但是，当应用滤镜时(在我的情况下为阴影)，子内容将不再被截断并且具有正方形角.其他滤镜(例如模糊)也会发生这种情况.

However, when a filter is applied (in my case, drop shadow), the child content is no longer cut off and has square corners. This happens too with other filters, like blur.

示例代码:

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会正确渲染元素.

Firefox renders the element properly when filters are applied.

在Chrome上对此是否有任何优雅的解决方法，尤其是当可能有很多子元素可能不在角落时?

Is there any elegant fix to this on Chrome, especially when there might be many child elements that may or may not be in the corner?

Chrome版本:版本66.0.3359.117(正式版本)(64位)

Chrome Version: Version 66.0.3359.117 (Official Build) (64-bit)

操作系统:Ubuntu 16.04 64位

OS: Ubuntu 16.04 64 bit

推荐答案

在包装器上添加绝对定位的 :: before 元素似乎可以解决该错误.

Adding an absolutely-positioned ::before element on wrapper seems to fix the bug.

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

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

这篇关于在Chrome中应用CSS过滤器时，边框半径和溢出隐藏失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！