CSS перспектива не работает в Firefox с переполнением: скрыто

Question

Я бы хотел использовать перспективу CSS с 3D-эффектом параллакса на моем сайте. 3D-эффект на вложенных элементах, поэтому я должен использовать transform-style: preserve-3d; для всех родителей. Однако, если у одного из родителей overflow: hidden; (что мне нужно), перспектива не работает в Firefox, а элементы не имеют 3D-эффекта.

Вот как это должно выглядеть (но без overflow: hidden;):

* {
  transform-style: preserve-3d;
}

.container {
  perspective: 1px;
  overflow-x: hidden;
  overflow-y: auto;
  height: 200px;
  width: 300px;
}

.child {
  margin: 5rem 0;
  height: 30px;
  width: 30px;
}

.child-1 {
  background-color: red;
  transform: translateZ(-1px) scale(2);
}

.child-2 {
  background-color: green;
  transform: translateZ(-0.5px) scale(1.5);
}

.child-3 {
  background-color: blue;
  transform: translateZ(-0.25px) scale(1.25);
}

.child-4 {
  background-color: purple;
  transform: translateZ(-2px) scale(3);
}

<div class="container">
  <div>
    <div class="with-overflow-hidden">
      <div class="child child-1"></div>
      <div class="child child-2"></div>
      <div class="child child-3"></div>
      <div class="child child-4"></div>
    </div>
  </div>
</div>

Однако, когда я добавлю к CSS .with-overflow-hidden { overflow: hidden; }, перспектива не будет работать в Firefox. Здесь является примером. Есть ли способ это исправить?