Why is the block's offsetHeight jumping?

  • 0
    Making a review slider with swiper.

    I use autoHeight: true, and I get very strange behavior - periodically the content of the slide is truncated.

    You reload the page - everything is ok, then you reload it again - everything is ok, you reload the content 3 times.
    https://youtu.be/Cg6OQOjDwa4 - behavior.

    Began to display offsetHeight on the active slide, this is what I see:
    сразу после инициализации слайдера выводится: 354
    
      через 2 секунды после, через таймаут: 426.


    What is the reason and how to fix it?
    code


    <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


    JavaScript Clara McKenzie, Jun 2, 2020

  • 0 Answers
Your Answer
To place the code, please use CodePen or similar tool. Thanks you!