CSS анимация не запускается при прокрутке в Chrome. Класс не добавляется к элементу

Question

У меня активирована анимация ключевого кадра CSS, когда элемент прокручивается в поле зрения путем добавления класса к элементам, которые я хочу анимировать, только когда они прокручиваются в поле зрения. Он работает как положено в Firefox, но по какой-то причине он не работает в Chrome. Инструменты разработчика показали, что к элементу не добавляется класс start, даже если он находится в порту просмотра. Любые идеи, почему это не сработает в chrome?

JQuery:

function isElementInViewport(elem) {
    var $elem = $(elem);

    // Get the scroll position of the page.
    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
    var viewportTop = $(scrollElem).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    // Get the position of the element on the page.
    var elemTop = Math.round($elem.offset().top);
    var elemBottom = elemTop + $elem.height();

    return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}

// Check if it's time to start the animation.
function checkAnimation() {
    var $elem = $('.parent-content-block .slide-in');

    // If the animation has already been started
    if ($elem.hasClass('start')) return;

    if (isElementInViewport($elem)) {
        // Start the animation
        $elem.addClass('start');
    }
}

// Capture scroll events
$(window).scroll(function () {
    checkAnimation();
});

document.addEventListener("DOMContentLoaded", function() {
  var elements = document.querySelectorAll(".slide-in");

  // Intersection observer
  var observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.intersectionRatio > 0) {
        entry.target.classList.add("start");
      }
    });
  });

  elements.forEach((el) => {
    observer.observe(el);
  });
});

<div>
  <img class="slide-in slide1" src="img.png">
  <div style="height: 200vh">
    scroll down
  </diV>
  <img class="slide-in slide1" src="img.png">
  <img class="slide-in slide2" src="img.png">
  <!-- other html... -->
</div>

Answer 1

Я реализовал базовый c Обозреватель пересечений для просмотра.

document.addEventListener("DOMContentLoaded", function () {
    var elements = document.querySelectorAll(".slide-in");

    // Intersection observer
    var observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
            if (entry.intersectionRatio > 0) {
                entry.target.classList.add("animate");
            } else {
                entry.target.classList.remove("animate");
            }
        });
    });

    elements.forEach((el) => {
        observer.observe(el);
    });
});

.pre-scroll {
  min-height: 100vh;
}

.container {
    min-height: 110vh;
}

.slide-in {
    position: relative;
    background-color: #333333;
    height: 300px;
    width: 100%;
    margin-bottom: 50px;
    animation: animateInit 0.7s ease-in-out;
}

.slide-in.animate {
    animation: animate 0.7s ease-in-out;
}

@keyframes animate {
    0% {
        opacity: 0;
        transform: translateX(-20rem);
    }
    100% {
        opacity: 1;
        transform: translateX(0rem);
    }
}

@keyframes animateInit {
  0% {
        opacity: 0;
        transform: translateX(-20rem);
    }
    100% {
        opacity: 1;
        transform: translateX(0rem);
    }
}

<div class="container">
  <div class="slide-in"></div>
  <div class="slide-in"></div>
  <div class="pre-scroll"></div>
  <div class="slide-in"></div>
</div>