IntersectionObserver not working in Safari or iOS

Question

I have a piece of code that adds a different css class to elements depending on whether they\'re scrolled into or out of the viewport from top or bottom.

It uses the

Answer 1

Although I can't put my finger on the exact cause of the bug, I do have a solution:

Try using document.body as the root and define sizes and scroll behavior to both html and body.

I think this relates to document being more than a simple html node (I also tried using document.documentElement without success) and how Safari initializes the box model for it.

Anyway, here's the updated working fiddle https://jsfiddle.net/gion_13/okrcgejt/8/ and screencasts of the tests on iOS and Mac Safari:

Answer 2

I have had the same issue recently and to solve this I just had to

set the root: null