При использовании CSS-фильтра в Chrome радиус границы и переполнение скрываются.

Question

У меня есть div с закругленными углами в Chrome с переполнением, установленным как скрытое.

Работает как положено: дочерний контент обрезается по углам.

Однако, когда применяется фильтр (в моем случае, тень), дочерний контент больше не обрезается и имеет квадратные углы. Это также происходит с другими фильтрами, такими как размытие.

Пример кода:

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 Fiddle: 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/

Answer 2

Если все, что вам нужно, это добавить тень от блока, вы можете заменить атрибут filter: drop-shadow на box-shadow следующим образом:

/* filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.3)); */
box-shadow: 4px 4px 8px rgba(0,0,0,0.3);

В общем, для тени я скорее использую атрибут box-shadow из-за широкой поддержки браузера .

Answer 3

Это странное поведение и, похоже, ошибка в Chrome.

Вы можете использовать псевдоэлемент, чтобы создать слой и применить к нему фильтр:

.card{
  /* Critical CSS */
  overflow: hidden;
  border-radius: 10px;
  background: gray;
  position: relative;
  width: 200px;
  height: 200px;
}

.card::before {
  filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.3));
  position: absoulte;
  content: '';
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

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

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