Почему прыгает offsetHeight у блока?

Question

[igoryusha22]

Делаю слайдер отзывов, посредством swiper.

Использую autoHeight: true, и получаю очень странное поведение - периодически контент слайда урезается.

Перезагружаешь страницу - все ок, потом опять перезагружаешь - все ок, на 3 раз перезагружаешь контент урезается.
https://youtu.be/Cg6OQOjDwa4 - поведение.

Стал выводить offsetHeight у активного слайда, вот что я вижу:

сразу после инициализации слайдера выводится: 354

  через 2 секунды после, через таймаут: 426.

С чем это связано и как фиксить?

код

<section class="reviews-slider">
  <div class="reviews-slider__container">

    <noscript class="loading-lazy">
      <img
        src="./assets/image/quote__left.svg"
        alt="Иконка закладки"
        loading="lazy"
        class="reviews-slider__image"
      />
    </noscript>

    <div class="swiper-wrapper">

      <div class="swiper-slide">
        <div class="reviews-slider-slide">
          <p class="reviews-slider-slide__text">
            Мне очень нравятся дизайн и стили, которые создает Ehya. Они такие разные и новаторские. Я покупала несколько раз из коллекций, и что мне нравится, это то, что они действительно неподвластны времени, а качество ткани просто превосходно.
          </p>
          <h3 class="reviews-slider-slide__author">
            Алисия Пума - клиент Fashun
          </h3>
        </div>
        <!-- /.reviews-slider-slide -->
      </div>
      <!-- /.swiper-slide -->


      <div class="swiper-slide">
        <div class="reviews-slider-slide">
          <p class="reviews-slider-slide__text">
            Мне очень нравятся дизайн и стили, которые создает Ehya. Они такие разные и новаторские. Я покупала несколько раз из коллекций, и что мне нравится, это то, что они действительно неподвластны времени, а качество ткани просто превосходно.
          </p>
          <h3 class="reviews-slider-slide__author">
            Максим Двойни - клиент Fashun
          </h3>
        </div>
        <!-- /.reviews-slider-slide -->
      </div>
      <!-- /.swiper-slide -->


      <div class="swiper-slide">
        <div class="reviews-slider-slide">
          <p class="reviews-slider-slide__text">
            Мне очень нравятся дизайн и стили, которые создает Ehya. Они такие разные и новаторские. Я покупала несколько раз из коллекций, и что мне нравится, это то, что они действительно неподвластны времени, а качество ткани просто превосходно. Я с нетерпением
            жду новых коллекций от сезона к сезону
          </p>
          <h3 class="reviews-slider-slide__author">
            Goul Smith - клиент Fashun
          </h3>
        </div>
        <!-- /.reviews-slider-slide -->
      </div>
      <!-- /.swiper-slide -->
    </div>
    <!-- /.swiper-wrapper -->

    <div class="reviews-slider-pagination reviews-slider__pagination">
      <span class="reviews-slider-pagination__dot"></span>
      <span class="reviews-slider-pagination__dot"></span>
      <span class="reviews-slider-pagination__dot"></span>
    </div>
    <!-- /.reviews-slider-pagination -->

  </div>
  <!-- /.reviews-slider-container -->
</section>
<!-- /.reviews-slider -->

import 'swiper/swiper-bundle.css';
import Swiper, {
  Pagination
} from 'swiper';
Swiper.use([Pagination]);

const reviewsSlider = () => {

  const swiper = new Swiper('.reviews-slider__container', {
    direction: 'horizontal',
    loop: true,
    speed: 400,
    pagination: {
      el: '.reviews-slider-pagination',
      bulletClass: 'reviews-slider-pagination__dot',
      bulletActiveClass: 'reviews-slider-pagination__dot--active',
      clickable: true,
    },
    autoHeight: true,
  });


  console.log(document.querySelector('.swiper-slide-active').offsetHeight);
  setTimeout(() => console.log(document.querySelector('.swiper-slide-active').offsetHeight), 2000);

};

reviewsSlider();

.reviews-slider
  padding-top: 24px
  padding-bottom: 64px
  &__container
    display: flex
    align-items: center
    flex-direction: column
    width: 100%
    overflow: hidden
  &__image
    +box(70px, 81px)
  &-slide
    display: flex
    flex-direction: column
    align-items: center
    &__text
      max-width: 280px
      margin-bottom: 24px
      font-family: HK Grotesk
      font-feature-settings: "locl" 0
      font-style: normal
      font-weight: normal
      font-size: 18px
      line-height: 36px
      text-align: center
      letter-spacing: 0.12px
      color: $blue-dark
    &__author
      font-family: HK Grotesk
      font-feature-settings: "locl" 0
      font-style: normal
      font-weight: bold
      font-size: 20px
      line-height: 24px
      text-align: center
      letter-spacing: 0.2px
      color: $blue-dark
  &__pagination
    margin-top: 24px
  &-pagination
    display: flex
    justify-content: center
    &__dot
      +box(5px)
      background: #B3BAC5
      border-radius: 2.5px
      &:not(:last-child)
        margin-right: 16px
      &--active
        background: #183B56