CSS animation isnt running when scrolled into view in Chrome. Class isn't being added to the element

Question

I have a CSS keyframe animation activate when the element is scrolled into view by adding the class to the elements i want to animate only when they are scrolled into view. It works as expected in Firefox, but for some reason it's not working in Chrome. Developer tools has shown that the element isn't getting the start class added to it even when it's in the view port. Any ideas why this won't work in 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

I've implemented a basic Intersection Observer for you to look over.

 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>