Intersection Observer in Edge / Problem in the animation

Question

I was learning about Intersection Observer, and I did a column of cards, that fade-in form the left, and in Chrome works fine, but un edge have a weird behavior, it's like that when you scroll all the observing nodes change the isIntersecting to false for a second (even if they are in the viewport) and comes back to true.

This is my code (I Tested in )

<div class="card-container">
        <div class="card">First Card</div>
        <div class="card"></div>
        <div class="card">Last Card</div>
</div>

.card-container{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.card{
    background: ghostwhite;
    border: 1px solid black;
    border-radius: .25rem;
    padding: .5rem;
    width: 10%;
    height: 7rem;
    text-align: center;
    transform: translateX(50vw);
    opacity: 1;
    transition: 0.5s;
}

.show{
    opacity: 1;
    transform: translateX(0);
}

const cards = document.querySelectorAll('.card')

const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        entry.target.classList.toggle("show", entry.isIntersecting)
        console.log(entry)
        // if(entry.isIntersecting) observer.unobserve(entry.target)
    })
},
{
    root: document,
    threshold: 1,
})


cards.forEach(card => {
    observer.observe(card)
})

I tried changing the observer to the body but doesn't work. And in this case the cards are not empty...

Answer 1

I can reproduce the issue in Edge. The cards will stop at right side when scrolling even they're in the viewport. The issue seems related with this feature: Windows Scrolling Personality. If you disable edge://flags/#windows-scrolling-personality in Edge flags, the behavior will be the same as in Chrome.

I think Edge might have some issue when implementing Intersection Observer API. I suggest that you can provide feedback regarding this issue to Edge team by pressing Alt+Shift+I in Edge and wait for if there's any reply and fix from Microsoft.