Javascript: IntersectionObserver issues
The IntersectionObserver interface is a JavaScript API that allows you to execute a function when an element enters or exits the viewport. It is commonly used to trigger animations when scrolling.
However, you may encounter some issues when using IntersectionObserver:
- The IntersectionObserver constructor is not supported in older browsers.
- If the element you want to observe is not in the DOM before you create the observer. This can happen if you run scripts in the wrong order.
- If the element you want to observe is hidden (for example, with the style display: none), it will not be observed.
-
If the animation you want to run is an animation with transformations in size and position, flickering may occur.
This is mainly due to the fact that the observer is constantly fired, even when the animation is still running. Here it is better to go for the classic solution and use the scroll event to see if the element to be watched is in the viewport.