Добавление класса в тег <div>приводит к задержке рендеринга шрифта (Bootstrap 4)

Question

У меня 2 bootstrap 4 карты с картинками в колоде. Они переворачиваются при нажатии, чтобы раскрыть информацию на обороте. Часть этой информации обернута в div, который я хотел бы поместить внизу карты, для этого я добавил класс align-self-end, а также некоторые css для этого класса. Это работало просто отлично. Однако простое добавление этого класса вызывает задержку ~ 500 мс в информации, отображаемой на обратной стороне карты при нажатии. Я не знаю, что вызывает это.

Вот мой html для карты:

    <div class="card mb-4 mt-4" style="max-width: 300px; min-width: 300px display: block;" data-clickable="true">
    <div class="card-inner">
        <img src="https://via.placeholder.com/1420x1933" class="card-img" alt="...">
        <div class="card-img-overlay">
            <div class="cardContent">
                <h5 class="card-title">Card Title</h5>
                <p class="card-text info">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            </div>
            <div class="alignToEnd">
                <p class="smallinfo"><b>1: </b>John</p>
                <p class="smallinfo"><b>2: </b>Smith</p>
                <p class="smallinfo"><b>3: </b>2008</p>
            </div>
        </div>
    </div>
</div>

А вот css для align-self-end:

    .alignToEnd {
    -ms-flex-wrap:wrap;flex-wrap:wrap;
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex-end;
    -webkit-box-align:left;
    -ms-flex-align:left;
    align-items:left;
    -webkit-box-pack:left;
    -ms-flex-pack:left;
    justify-content:left;
    padding-bottom: 10px;
    padding-left: 10px;
}

Я пробовал это с упрощенным классом, который достигает аналогичного результата, align-self-end со следующим css:

.align-self-end {
    position:absolute;
    bottom:2rem;
}

Вот мой кодовый блок. Карта слева не имеет класса, карта справа имеет класс для перемещения информации в конец, и при нажатии информация на обороте занимает больше времени. Вам нужно будет обновить sh страницу после первого щелчка, чтобы обновить sh кэш и повторить эффект.

https://codepen.io/Darlton29/pen/bGVojWE

Answer 1

Кажется, это ошибка рендеринга в Chrome (Firefox не имеет проблемы). Комбинация этого перехода и абсолютного позиционирования alignToEnd -div делает это возможным в Chrome.

Решением было бы работать с flex следующим образом:

   <div class="h-100 d-flex flex-column">
      <div class="cardContent flex-grow-1">
         <h5 class="card-title">Card Title</h5>
         <p class="card-text info">This card has align-self-end class on the bottom div and loads much slower. </p>
      </div>
      <div>
         <p class="smallinfo"><b>1: </b>John</p>
         <p class="smallinfo"><b>2: </b>Smith</p>
         <p class="smallinfo"><b>3: </b>2008</p>
      </div>
   </div>

Для удобства я использовал Bootstrap утилиты.