IntersectionObserver isIntersecting property never is false if threshold greater than 0

Question

If I configure the threshold value to anything greater than 0, isIntersecting never returns false when the target leaves the viewport. However, if I leave the default threshold at 0, isIntersecting will return false when the target exits the viewport. See example below and delete threshold: 1.0.

https://jsfiddle.net/snewcomer24/get0a4xr/1/

This seems like divergent behavior. Does anybody have an explanation for this behavior?

Answer 1

This is because your observer callback is only called when the element crosses the threshold ratio.

By default the threshold is 0, so the callback is called when the element enters or leaves the viewport. When you change the threshold to 1.0, your callback is instead called when the element becomes 100% visible, or stops being 100% visible.

When the element stops being 100%, it will be something like 99% visible, and still have isIntersecting as true. Then, when the element leaves the viewport, it's not relevant to your observer (since your threshold is not 0), so your callback isn't called again.

If you care about both the element becoming 100% visible and leaving the viewport, you can pass an array as the threshold (like [0, 1.0]) and your callback will be called when any of those ratios are crossed.

https://jsfiddle.net/wzst4jx5/12/

An aside: I originally thought entry.isIntersecting was just shorthand for entry.intersectionRatio > 0. But I've found Chrome (65) can report isIntersecting as true, but intersectionRatio as 0, when something very slowly enters the viewport.