CSS фоновый фильтр не отображается в макете столбца

Question

Пытаясь создать эффект размытия при наведении, я заметил, что фоновые фильтры не работают в контексте макета столбца - они просто не отображаются, если не применено 3D-преобразование. Следующий фрагмент кода иллюстрирует поведение.

Почему это так?

.columns {
  columns: 3;
  column-gap: 1rem;
}

.column {
  position: relative;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: rgba(255, 0, 0, 0.25);
  backdrop-filter: blur(10px);
}

.overlay.overlay-fix {
  transform: translate3d(0, 0, 0);
}

<div class="columns">
  <div class="column">
  <h1>#noFilter</h1>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.
  </div>
  <div class="column">
  <h1>Filter</h1>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.
    <div class="overlay"></div>
</div>
  <div class="column">
  <h1>Filter + 3D Transform</h1>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.
    <div class="overlay overlay-fix"></div>
</div>
</div>

Редактировать: Как указано в комментариях, использование любого перевода будет работать, а не только 3D-переводы. Я до сих пор не понимаю, почему.