Абсолютная проблема положения в Safari и Internet Explorer

Question

У меня есть этот код: https://codepen.io/dj-smoke-starboy/pen/jXxJRd,, и он отлично работает в Chrome и Firefox, но не работает в Safari или Internet Explorer. Я хочу работать так же, как это показано в браузере Chrome, например. Div вставляются автоматически и толкают друг друга в соответствии. Если кто-нибудь знает, как это исправить, я буду признателен. Спасибо!

Я попытался изменить относительное положение, но div начнут появляться снизу вверх, и я этого не хочу. Я также пытался использовать nth-of-type, без использования позиций, div вставляются сверху вниз, но они не толкают друг друга вниз. В этом примере у меня есть 10 дел. Сначала я хочу, чтобы div номер 10 показывался первым сверху, и он будет выталкиваться div 9 и так далее.

Html File:

<div class="cardWrap">
  <div class="card">itin 1</div>
  <div class="card">itin 2</div>
  <div class="card">itin 3</div>
  <div class="card">itin 4</div>
  <div class="card">itin 5</div>
  <div class="card">itin 6</div>
  <div class="card">itin 7</div>
  <div class="card">itin 8</div>
  <div class="card">itin 9</div>
  <div class="card">itin 10</div>
</div>

Css file:
@itineraries: 10;

.itin-loop (@i) when (@i > 0) {
  &:nth-last-of-type(@{i}) {
    animation-delay: ~"@{i}s";
  }
  .itin-loop(@i - 1);
}

body {
  background-color: #ddd;
  padding: 1em;
}

.cardWrap {
 position: relative;  
}

[class^="c"] {
  animation: slide 0.5s linear both;
  margin-bottom: 1em;
  opacity: 0;
  position: absolute;
  transform: translateY(-5vh);
  .itin-loop (@itineraries);
}

@keyframes slide {
  0% {
    filter: blur(1em);
    opacity: 0;
  }
  100% {
    filter: blur(0);
    opacity: 1;
    position: relative;
    transform: translateY(0);
  }
}

для нормальной работы во всех браузерах, как это происходит сейчас в Chrome и Firefox. Спасибо!